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 the matching import and startupOptions object at the top of your Quickstart file: src/main.ts in Vanilla or src/App.tsx in React, outside the component. These options name the author and start the Editor in suggesting mode:

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

export const startupOptions = {
  documentMode: 'suggesting',
  user: {
    name: 'Jordan Lee',
    email: 'jordan@example.com',
  },
} satisfies Partial<Config>;

In Vanilla, spread startupOptions into the object passed to new SuperDoc(). In React, spread it onto SuperDocEditor as {...startupOptions}. 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.

67 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.

Keep React configuration objects such as user and ui outside the component or memoize them. Changing their object identity recreates the Editor; changing documentMode does not.

Continue to document modes

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

For deployment-specific settings, choose Telemetry or License.

On this page