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

Keep the Quickstart page, styles, and /sample.docx. Replace src/main.ts in Vanilla or src/App.tsx in React with the matching example below. It keeps the author and export button, and adds Switch to viewing after the document opens.

src/main.ts

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

const exportButton = document.querySelector<HTMLButtonElement>('#export-docx');
const viewingButton = document.createElement('button');
viewingButton.type = 'button';
viewingButton.textContent = 'Switch to viewing';
viewingButton.disabled = true;

if (!exportButton) throw new Error('The export button is missing.');
exportButton.before(viewingButton);

const superdoc = new SuperDoc({
  selector: '#editor',
  document: '/sample.docx',
  documentMode: 'suggesting',
  user: { name: 'Jordan Lee', email: '[email protected]' },
  viewing: {
    comments: true,
    trackedChanges: 'markup',
  },
  onReady: () => {
    exportButton.disabled = false;
    viewingButton.disabled = false;
  },
  onContentError: ({ error }) => console.error('SuperDoc could not open the document.', error),
  onException: ({ error }) => console.error('SuperDoc could not open the document.', error),
});

viewingButton.addEventListener('click', () => {
  superdoc.setDocumentMode('viewing');
  viewingButton.disabled = true;
});

exportButton.addEventListener('click', async () => {
  exportButton.disabled = true;
  try {
    await superdoc.export({ exportType: ['docx'], exportedName: 'sample-edited' });
  } catch (error) {
    console.error('SuperDoc could not export the document.', error);
  } finally {
    exportButton.disabled = false;
  }
});

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

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

Change the effective date while suggesting, then select Switch to viewing. The proposal should remain visible, but typing should no longer change the document. Export DOCX should still download the document with the proposal.

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