Editor Modes

Overview

The editor supports four modes that control how users interact with the document:

Editing Mode

The default mode. Users can freely edit the document — type text, format, insert tables and images, etc. All changes are applied directly to the document.

<DocxEditor
  documentBuffer={buffer}
  mode="editing"
/>

Suggesting Mode

Enables track changes. All edits are recorded as insertions and deletions that can be accepted or rejected. This is useful for collaborative editing workflows.

<DocxEditor
  documentBuffer={buffer}
  mode="suggesting"
  author="Jane Doe"
/>

The author prop sets who is credited for each tracked change. The toolbar shows accept/reject controls for suggestions.

Viewing Mode

A read-only mode that keeps the toolbar visible. Users can zoom, print, navigate headings, and use the document outline — but they cannot edit content. This is the right choice for document review UIs where users still need toolbar controls.

<DocxEditor
  documentBuffer={buffer}
  mode="viewing"
/>

Read-Only Mode

The most minimal mode. Hides the toolbar, rulers, and all editing UI. The document is rendered as a static preview. Use this for embedding documents in pages where no interaction is needed.

<DocxEditor
  documentBuffer={buffer}
  readOnly
/>

Controlled Mode Switching

You can let users switch modes at runtime using onModeChange:

function App() {
  const [mode, setMode] = useState<'editing' | 'suggesting' | 'viewing'>('editing');
 
  return (
    <div>
      <select value={mode} onChange={(e) => setMode(e.target.value as any)}>
        <option value="editing">Editing</option>
        <option value="suggesting">Suggesting</option>
        <option value="viewing">Viewing</option>
      </select>
 
      <DocxEditor
        documentBuffer={buffer}
        mode={mode}
        onModeChange={setMode}
        author="Jane Doe"
      />
    </div>
  );
}

The onModeChange callback fires when the user switches modes through the toolbar's built-in mode selector (if visible). Passing both mode and onModeChange makes it a controlled component.

Mode Comparison