Headless content editor

The instance.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.

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

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.

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 — Programmatic text-block editing session API.
• Edit PDF text using our JavaScript content editor — Built-in UI content editing guide.