Configure the Editor

Set startup options when the Editor mounts. Use runtime methods for changes made after onReady.

Start with a working configuration

Continue with the project and sample NDA from the Editor quickstart:

import { SuperDoc, type Config } from 'superdoc';
import 'superdoc/style.css';

const config = {
  selector: '#editor',
  document: '/sample.docx',
  user: {
    name: 'Jordan Lee',
    email: '[email protected]',
  },
  onReady: () => {
    console.info('SuperDoc is ready.');
  },
  onContentError: ({ error }) => {
    console.error('SuperDoc could not read the document.', error);
  },
  onException: ({ error }) => {
    console.error('SuperDoc could not start.', error);
  },
} satisfies Config;

const superdoc = new SuperDoc(config);

window.addEventListener('beforeunload', () => superdoc.destroy());

Both examples reopen /sample.docx, assign document activity to Jordan Lee, and report startup errors. satisfies checks field names and values before the Editor receives them.

Notice the boundary:

• Vanilla uses selector; the React wrapper creates its own container.
• document and user describe what opens and who is acting.
• onReady marks the first safe moment to enable document actions.
• onContentError reports content and import errors. onException reports other runtime exceptions.

Change one startup decision

Set documentMode to suggesting, then reload the application. New edits are now recorded as tracked changes instead of changing the document directly.

Document modes explains the three modes and lets you run the same edit in each one.

Find another option

Choose a group, then choose a field. The first layer explains what the field changes. Expand API details only when you need the full contract.

Change a running Editor

After onReady, prefer a runtime method when one exists. In React, access these methods through editorRef.current?.getInstance().

To change extensions or workerUrls, create a new Editor. Vanilla must destroy the current SuperDoc before creating its replacement. In React, remount SuperDocEditor by changing its key; the wrapper destroys the old instance. Recreating the Editor can reset selection and temporary interface state.

Choose the next decision

• Load and save documents to connect the Editor to your backend storage.
• Who renders the UI? to choose between built-in, hybrid, and custom interface ownership.