# 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]

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`.

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

```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());

```

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

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

export function Editor() {
  const [documentMode, setDocumentMode] = useState<DocumentMode>('suggesting');

  return (
    <>
      <button onClick={() => setDocumentMode('viewing')} type='button'>
        Switch to viewing
      </button>
      <SuperDocEditor
        document='/sample.docx'
        documentMode={documentMode}
        viewing={{
          comments: true,
          trackedChanges: 'markup',
        }}
      />
    </>
  );
}

```


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

## 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/built-in-ui/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.