Choose a document mode

The Configuration guide starts /sample.docx in suggesting mode. Compare it with editing and viewing, then choose the behavior your application needs.

Try each mode

Expand the Editor. Try the replacement in Editing, then reset the sample. Switch to Suggesting and replace 30 days with 60 days. Switch to Viewing, then use Changes to compare Original, Markup, and Final against that same proposal.

Try document modesTyping changes the document directly.

Loading…

Mode

The sample editor loads as this demo enters view. The rest of the article stays lightweight.

Mode	What happens	Use it when
`editing`	The text changes directly.	Changes should become part of the document.
`suggesting`	The edit becomes a tracked change.	Another person should review the proposed change.
`viewing`	Editing is disabled.	A person should read without changing the DOCX.

editing is the default. Modes change Editor behavior in the browser. They do not decide who can open or save the document.

Apply the mode to your project

Set documentMode when the Editor starts. These examples start in suggesting, configure the later viewing state, and show how your application can switch to viewing.

src/main.ts

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

let ready = false;

const superdoc = new SuperDoc({
  selector: '#editor',
  document: '/sample.docx',
  documentMode: 'suggesting',
  viewing: {
    comments: true,
    trackedChanges: 'markup',
  },
  onReady: () => {
    ready = true;
  },
});

export function switchToViewing() {
  if (!ready) return;
  superdoc.setDocumentMode('viewing');
}

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

Vanilla calls setDocumentMode() on the ready Editor. React updates the documentMode prop. Neither change remounts the Editor.

Choose how tracked changes appear

Viewing stays read-only. Its trackedChanges option changes how proposals appear without accepting or rejecting them.

For the 30 days to 60 days proposal in the demo:

`trackedChanges`	What appears in viewing mode	Use it to
`original`	`30 days`, without change marks.	Show the document before the proposal.
`markup`	`30 days` deleted and `60 days` inserted, both marked.	Show exactly what the proposal changes.
`final`	`60 days`, without change marks.	Preview the document as if it were accepted.

original is the default. These options only change the display. The proposal remains in the DOCX.

Set viewing.comments to true to show comment anchors and threads. Comments are hidden by default.

To change a mounted viewer, call superdoc.setViewingOptions({ trackedChanges: 'final' }) after onReady. Omitted options keep their current values.

For review controls, see Track changes. For comment threads, see Comments.

Continue to load and save

Load and save a DOCX to connect the same project to your storage.

Try each mode

Apply the mode to your project

Choose how tracked changes appear

Continue to load and save

On this page