Configure the Editor

Start with the smallest configuration that loads the document and interface you need. Add a field only when a product requirement justifies it.

Use one typed configuration

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

const editorConfig = {
  selector: '#editor',
  document: '/contract.docx',
  documentMode: 'editing',
  user: { name: 'Avery Stone', email: '[email protected]' },
  contained: true,
  zoom: { mode: 'fit-width', fitWidth: { max: 100, padding: 24 } },
  modules: {
    toolbar: { responsiveToContainer: true },
    comments: { displayMode: 'auto' },
    surfaces: { findReplace: true },
  },
  onReady: () => {
    console.info('SuperDoc is ready.');
  },
} satisfies Config;

const superdoc = new SuperDoc(editorConfig);

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

The important configuration groups are:

• selector, document, and documentMode establish the Editor and its starting posture.
• user identifies the person for comments, suggestions, and collaboration presence. Supply trusted identity from your application.
• modules configures built-in interface and integration subsystems.
• zoom, contained, fonts, proofing, and layout options control host behavior.
• onReady, error callbacks, and focused events connect the Editor to application lifecycle.

Keep the configuration object stable in reactive frameworks. Recreating the Editor to apply a new object can reset selection and transient UI state. Use runtime methods for supported changes such as mode and zoom, and remount deliberately for initialization-only fields such as extensions.

modules combines presentation, behavior, and integration settings. Add only the subsystem configuration your application uses.

Client configuration is not authorization. A browser user can inspect or alter client code, so document access and collaboration authorization must be enforced by trusted services.