Configure the Editor

Set how the Editor starts, then find the configuration options your integration needs.

Continue with the /sample.docx project from the Quickstart. Add a current user and choose how the Editor starts.

Set the startup configuration

Add documentMode and user to the Editor setup from Quickstart:

Startup options
import type { Config } from 'superdoc';

export const startupOptions = {
  documentMode: 'suggesting',
  user: {
    name: 'Jordan Lee',
    email: '[email protected]',
  },
} satisfies Partial<Config>;

In Vanilla, spread startupOptions into the object passed to new SuperDoc(). In React, spread it onto SuperDocEditor. Keep the callbacks and export code from Quickstart.

Reload the application and change September 1, 2026 to October 1, 2026. The edit should appear as a tracked change instead of replacing the date directly.

The user value identifies the author of the tracked change. This example uses a fixed user so it runs without authentication. satisfies checks the field names and values during typechecking.

Find an option

Choose a group, then choose a field. Each entry shows what it changes, its type, and its default. Some fields link to a guide with a complete example. Expand API details for the generated description.

Config
const config = {
} satisfies Config;
required
selector

Choose the element where the Editor mounts.

Type
string | HTMLElement
API details

The selector or element to mount the SuperDoc into.

63 fields · generated from Config

Update a running Editor

Configuration sets the starting state. After onReady, use a runtime method when a value needs to change.

ChangeRuntime method
Open a DOCXreplaceFile()
Switch modessetDocumentMode()
Change zoomsetZoom() or setZoomMode()

Changing the object passed to new SuperDoc() does not update a running Vanilla instance. In React, documentMode updates as a prop. Access other runtime methods through editorRef.current?.getInstance(). If a Vanilla setting has no runtime method, call destroy() on the current instance before creating its replacement. In React, remount SuperDocEditor by changing its key; the wrapper destroys the old instance.

Continue to document modes

Compare editing, suggesting, and viewing, then choose what viewers see when a document has comments or tracked changes.

On this page