# Choose a document mode

> Choose how the Editor handles edits and what appears in viewing mode.



The [Configuration](/editor/configuration) guide starts `/sample.docx` in `suggesting` mode. Compare it with `editing`
and `viewing`, then choose the behavior your application needs.

## Try each mode [#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.

> **Interactive editor: Try document modes**
>
> Sample: [open the fixture](/fixtures/document-modes.docx).
>
> Preset: `document-modes`.
>
> Try the same edit in each mode. Editing changes the document directly and is the default. Suggesting records a tracked change. After making a suggestion, switch to Viewing and use Changes to choose Original, Markup, or Final for the same proposal.
>
> Local DOCX selection: disabled.


| 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 [#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.

**Vanilla — `src/main.ts`**

```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: 'jordan@example.com' },
  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());

```

**React — `src/App.tsx`**

```tsx
import { useRef, useState } from 'react';
import { SuperDocEditor, type DocumentMode, type SuperDocRef } from '@superdoc/react';
import '@superdoc/react/style.css';

const user = { name: 'Jordan Lee', email: 'jordan@example.com' };

function reportDocumentError({ error }: { error: unknown }) {
  console.error('SuperDoc could not open the document.', error);
}

export default function App() {
  const editorRef = useRef<SuperDocRef>(null);
  const exportingRef = useRef(false);
  const [ready, setReady] = useState(false);
  const [exporting, setExporting] = useState(false);
  const [documentMode, setDocumentMode] = useState<DocumentMode>('suggesting');

  async function exportDocument() {
    if (exportingRef.current) return;
    exportingRef.current = true;
    setExporting(true);
    try {
      await editorRef.current?.getInstance()?.export({ exportType: ['docx'], exportedName: 'sample-edited' });
    } catch (error) {
      console.error('SuperDoc could not export the document.', error);
    } finally {
      exportingRef.current = false;
      setExporting(false);
    }
  }

  return (
    <main>
      <button disabled={!ready || documentMode === 'viewing'} onClick={() => setDocumentMode('viewing')} type='button'>
        Switch to viewing
      </button>
      <button disabled={!ready || exporting} onClick={() => void exportDocument()} type='button'>
        Export DOCX
      </button>
      <SuperDocEditor
        ref={editorRef}
        user={user}
        document='/sample.docx'
        documentMode={documentMode}
        onReady={() => setReady(true)}
        onContentError={reportDocumentError}
        onException={reportDocumentError}
        viewing={{
          comments: true,
          trackedChanges: 'markup',
        }}
      />
    </main>
  );
}

```


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 [#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](/editor/track-changes). For comment threads, see
[Comments](/editor/comments).

## Continue to load and save [#continue-to-load-and-save]

[Load and save a DOCX](/editor/load-and-save-documents) to connect the same project to your storage.