---
title: "Use events and integration APIs in Document Authoring"
canonical_url: "https://www.nutrient.io/guides/document-authoring/events-and-integration/"
md_url: "https://www.nutrient.io/guides/document-authoring/events-and-integration.md"
last_updated: "2026-06-08T17:11:05.445Z"
description: "Learn how to listen for Document Authoring editor events, autosave changes, switch documents, and clean up editor instances safely."
---

# Use events and integration APIs

Before you start, ensure the Document Authoring library is installed and running. Refer to the [getting started](https://www.nutrient.io/sdk/document-authoring/getting-started.md) guide.

Document Authoring exposes editor events and runtime methods that help you integrate the editor into workflows such as autosave, document switching, and cleanup.

The example code omits error handling. Add it before using this code in production.

## Listen for editor events

Use [`editor.on()`](https://www.nutrient.io/api/document-authoring/types/docautheditor/#on), [`editor.off()`](https://www.nutrient.io/api/document-authoring/types/docautheditor/#off), and [`editor.once()`](https://www.nutrient.io/api/document-authoring/types/docautheditor/#once) to subscribe to editor lifecycle events.

Document Authoring currently emits:

- `document.load` — Fired when a document is loaded into the editor, including after switching documents.

- `content.change` — Fired when document content changes through user edits or programmatic updates.

## Autosave on content changes

Use content change events to save the current DocJSON whenever the document updates:

```js

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

```

To reduce save frequency, debounce the save logic:

```js

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 whenever a new document becomes active in the editor:

```js

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

```

If you only need a one-time callback, use [`editor.once()`](https://www.nutrient.io/api/document-authoring/types/docautheditor/#once):

```js

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

```

## Remove listeners during cleanup

Use [`editor.off()`](https://www.nutrient.io/api/document-authoring/types/docautheditor/#off) to remove a specific handler or all handlers for an event:

```js

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);

```

You can also remove all listeners for an event:

```js

editor.off('content.change');

```

## Switch documents in an existing editor

Use [`editor.setCurrentDocument()`](https://www.nutrient.io/api/document-authoring/types/docautheditor/#setcurrentdocument) to attach a different document to the same editor instance:

```js

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

```

You can use [`editor.currentDocument()`](https://www.nutrient.io/api/document-authoring/types/docautheditor/#currentdocument) to access the current document any time:

```js

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

```

When a new document is attached, the editor emits `document.load` for that document.

## Use the editor and system together

Use [`editor.docAuthSystem()`](https://www.nutrient.io/api/document-authoring/types/docautheditor/#docauthsystem) when you need the `DocAuthSystem` instance that created the editor:

```js

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

```

## Destroy the editor safely

When your application no longer needs the editor, call [`editor.destroy()`](https://www.nutrient.io/api/document-authoring/types/docautheditor/#destroy). If you’re done with the underlying system as well, destroy that too:

```js

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

```

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

```js

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

- [Document Authoring API reference](https://www.nutrient.io/api/document-authoring/)

- [DocJSON](https://www.nutrient.io/guides/document-authoring/working-with-documents/docjson.md)

- [Working with documents](https://www.nutrient.io/guides/document-authoring/working-with-documents/overview.md)
---

## Related pages

- [Changelog for Document Authoring SDK](/guides/document-authoring/changelog.md)
- [Enhancing document authoring with CSP guidelines](/guides/document-authoring/content-security-policy-and-firewall-rules.md)
- [Use copy/paste and HTML interoperability](/guides/document-authoring/copy-paste-and-html-interoperability.md)
- [Customize actions and the toolbar](/guides/document-authoring/customize-actions-and-toolbar.md)
- [Document Authoring SDK](/guides/document-authoring.md)
- [Get started with Document Authoring guides](/guides/document-authoring/intro.md)
- [How to self-host Document Authoring assets](/guides/document-authoring/self-hosting-assets.md)