This HTML page is not optimized for LLM or AI agent consumption. Fetch the Markdown version instead: /guides/document-authoring/customize/events-and-integration.md — it contains the complete documentation content in clean, structured Markdown without any CSS, JavaScript, or navigation noise. Use events and integration APIs in Document Authoring

Use events and integration APIs

Markdown version of this page, suitable for AI agents and automation

Before you start, install Nutrient Document Authoring SDK and load it in your app. If you haven’t set it up, refer to the getting started guide.

Nutrient Document Authoring exposes editor events and runtime methods for autosave, document switching, selection controls, zoom control, and cleanup.

The examples omit error handling, so add error handling before you use this code in production.

Listen for editor events

Use editor.on(), editor.off(), and editor.once() to subscribe to editor lifecycle events.

These events cover document loading, content edits, and selection changes:

  • Event document.load — Fires when the editor loads a document, including after document switching.
  • Event content.change — Fires when a user edit or programmatic update changes document content.
  • Event selection.change — Fires after the caret or selection changes, including when the selection clears. The event has no payload.

React to selection changes

Subscribe to selection.change with editor.on() when external controls depend on selected text or caret state.

In the handler, call editor.getSelectionContent() to read the current text or fragment. It returns null for a collapsed caret or no selection. Use editor.hasActiveCursor() to check for a cursor.

Registering a listener doesn’t emit an event, so read the first selection when you set up the controls. If a control displays selected content, refresh it on content.change and document.load too.

Remove handlers with editor.off() during cleanup.

For actions such as translating selected text, read the selection again when the action starts because a cached preview can become stale. If the selection has disappeared, report the missing selection, and don’t apply the action to the whole document.

Autosave on content changes

Use content.change events to save the current DocJSON when the document changes:

editor.on('content.change', async () => {
  const doc = await editor.currentDocument().saveDocument();
  localStorage.setItem('draft', JSON.stringify(doc));
});

Debounce the save logic to reduce save frequency:

let saveTimeout;


editor.on('content.change', () => {
  clearTimeout(saveTimeout);


  saveTimeout = setTimeout(async () => {
    const doc = await editor.currentDocument().saveDocument();


    await fetch('/api/save', {
      method: 'POST',
      body: JSON.stringify(doc),
    });
  }, 1000);
});

React to document loads

Use document.load to run logic when the editor loads a document:

editor.on('document.load', () => {
  console.log('Document loaded successfully');
});

Use editor.once() when you only need one callback:

editor.once('document.load', () => {
  console.log('Initial document is ready');
});

Remove listeners during cleanup

Use editor.off() to remove a specific handler or all handlers for an event:

const handleChange = async () => {
  const doc = await editor.currentDocument().saveDocument();
  localStorage.setItem('draft', JSON.stringify(doc));
};


editor.on('content.change', handleChange);


// Later.
editor.off('content.change', handleChange);

Use editor.off() without a handler to remove all listeners for an event:

editor.off('content.change');

Switch documents in an existing editor

Use editor.setCurrentDocument() to attach another document to the same editor instance:

const imported = await docAuthSystem.import(fetch('/documents/sample.docx'), {
  format: 'docx',
});
editor.setCurrentDocument(imported);

Use editor.currentDocument() to access the current document:

const currentDoc = editor.currentDocument();
const pdf = await currentDoc.export({ format: 'pdf' });

When you attach another document, the editor emits document.load for that document.

Set the editor zoom

Use editor.setZoom() to change the editor zoom programmatically. Pass a scale factor, where 1 is 100 percent and 0.5 is 50 percent:

editor.setZoom(0.75);


const percent = Math.round(editor.getZoom() * 100);
console.log(`Editor zoom: ${percent}%`);

Use editor.getZoom() when your surrounding UI needs to display the current zoom. The value reflects zoom changes made by API calls, the toolbar zoom control, and keyboard shortcuts.

If you switch documents with editor.setCurrentDocument(), reapply your preferred zoom after the new document loads.

Use the editor and system together

Use editor.docAuthSystem() to access the DocAuthSystem instance that created the editor:

const system = editor.docAuthSystem();
const emptyDocument = await system.createDocumentFromPlaintext('');
editor.setCurrentDocument(emptyDocument);

Destroy the editor safely

Call editor.destroy() when your app no longer needs the editor, and destroy the system too if your app no longer needs it:

editor.destroy();
docAuthSystem.destroy();

A common cleanup pattern returns a function that unregisters listeners and destroys the editor:

const setupEditor = async (target) => {
  const editor = await docAuthSystem.createEditor(target);


  const handleLoad = () => console.log('loaded');
  const handleChange = () => console.log('changed');


  editor.on('document.load', handleLoad);
  editor.on('content.change', handleChange);


  return () => {
    editor.off('document.load', handleLoad);
    editor.off('content.change', handleChange);
    editor.destroy();
  };
};

Learn more

Use these references for API details. Refer to the related guides for document concepts and location workflows: