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`	Text editing is disabled.	A person should read without editing the text.

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 keeps document text 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.

Keep comments read-only too

Comment actions are independent of document mode. interaction.comments.level defaults to resolve, including in viewing mode. When comments are visible and permission and command checks allow, viewers can create comments from a selection, reply, edit their own comments and replies, delete comments and replies, and resolve or reopen threads. Creating a comment from document text requires allowSelectionInViewMode: true. The configured role and permissionResolver determine whether viewers can delete other authors' comments or resolve their threads. Use level write to allow discussion without resolving or reopening threads.

For a fully read-only viewer in the browser, combine documentMode: 'viewing' with interaction.comments.level: 'read'. Add these options to the existing Editor configuration:

const viewerOptions = {
  documentMode: 'viewing',
  viewing: { comments: true },
  interaction: {
    comments: { level: 'read' },
    trackedChanges: { allowDecisions: false },
  },
} as const;

In Vanilla, spread viewerOptions into new SuperDoc(). In React, spread it onto SuperDocEditor.

This shows existing threads while disabling comment creation, replies, edits, deletion, resolution, and reopening. Viewing mode already blocks accepting and rejecting tracked changes; allowDecisions: false keeps those actions disabled if the mode changes. Your backend must still enforce who may save or collaborate; see Interaction and permissions.

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

Keep comments read-only too

Continue to load and save

On this page