---
title: "Headless content editor | Nutrient Web SDK"
canonical_url: "https://www.nutrient.io/guides/web/headless/content-editor/"
md_url: "https://www.nutrient.io/guides/web/headless/content-editor.md"
last_updated: "2026-06-11T16:04:58.532Z"
description: "React to content editor state changes and build custom programmatic controls for the content editor without the default UI."
---

# Headless content editor

The [`instance.contentEditor`](https://www.nutrient.io/api/web/classes/NutrientViewer.Instance.html#contenteditor) namespace exposes the headless surface for content editor integrations. Use it when you want to react to editor state in your own UI or respond to content editing changes without relying on the built-in chrome.

Looking for the visual editing experience? Refer to the [PDF content editing API](https://www.nutrient.io/guides/web/editor/content-editor-api.md) and [edit PDF text using our JavaScript content editor](https://www.nutrient.io/guides/web/editor/edit-text.md) guides. This page covers the headless state surface you can use alongside those guides.

## When to use this

Reach for the headless content editor surface when you want to:

- Watch the content editor state from a custom toolbar or side panel.

- React to state changes in your own UI without polling.

- Keep host-app controls in sync with the current content editing session.

## API reference

| Symbol                                                           | Notes                                               |
| ---------------------------------------------------------------- | --------------------------------------------------- |
| [`instance.contentEditor`](https://www.nutrient.io/api/web/classes/NutrientViewer.Instance.html#contenteditor)                   | Headless namespace for content editor integrations. |
| [`contentEditor.stateChange`](https://www.nutrient.io/api/web/types/Events.ContentEditorStateChangeEvent.html) | Event fired when the content editor state changes.  |

## Example: Listen for content editor state changes

The following example shows how to listen for content editor state changes using the `contentEditor.stateChange` event. This event is fired whenever the content editor state changes, such as when a new editing session starts, when a user makes changes to the content, or when the editing session ends.

```js

const instance = await NutrientViewer.load({
  container: "#viewer",

  document: "contract.pdf"
});

instance.addEventListener("contentEditor.stateChange", (event) => {
  console.log("Content editor state changed:", event);
});

```

Use this event to update your own buttons, menus, or status text when the editor changes state.

## Related

- [PDF content editing API](https://www.nutrient.io/guides/web/editor/content-editor-api.md) — Programmatic text-block editing session API.

- [Edit PDF text using our JavaScript content editor](https://www.nutrient.io/guides/web/editor/edit-text.md) — Built-in UI content editing guide.
---

## Related pages

- [Annotation clipboard](/guides/web/headless/clipboard.md)
- [Headless callout annotations](/guides/web/headless/callout.md)
- [Headless color presets](/guides/web/headless/color-presets.md)
- [Headless note annotations](/guides/web/headless/note.md)
- [Headless](/guides/web/headless.md)
- [Headless link annotations](/guides/web/headless/link.md)
- [Headless image annotations](/guides/web/headless/image.md)
- [Headless measurement annotations](/guides/web/headless/measurement.md)
- [Headless ink annotations](/guides/web/headless/ink.md)
- [Programmatic notes panel](/guides/web/headless/notes-panel.md)
- [Headless redaction annotations](/guides/web/headless/redactions-from-selection.md)
- [Headless shape annotations](/guides/web/headless/shape.md)
- [Headless stamp annotations](/guides/web/headless/stamp.md)
- [Headless text annotations](/guides/web/headless/text-annotations.md)
- [Headless text markup](/guides/web/headless/text-markup.md)