Add comments to the Editor

Comments are enabled by default. Provide the current user so new comments keep the correct author, then choose how the comments UI adapts to the Editor width.

Try the comment workflow

Expand the Editor and find the existing comment anchored to September 30, 2026. Use the controls above the document to compare both configuration axes:

1. Change Layout between Auto, Sidebar, and Inline to compare how the comment surface uses the Editor width.
2. Change Actions between Read, Write, and Resolve to compare the maximum comment action the Editor allows.

Changing either configuration reloads the current DOCX because these are startup options. Thread changes remain; the open comment and selection reset. The demo changes only the document in this browser. Your application saves those changes by exporting the DOCX through the same flow you built in Load and save.

Add the built-in comments UI

Continue with /sample.docx from the Quickstart. Add the current user and set the comments layout:

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

const superdoc = new SuperDoc({
  selector: '#editor',
  document: '/sample.docx',
  user: {
    name: 'Alex Rivera',
    email: '[email protected]',
  },
  ui: {
    toolbar: { container: '#toolbar' },
    comments: {
      layout: 'auto',
    },
  },
});

Vanilla also needs separate toolbar and Editor mounts:

<div id="toolbar"></div>
<div id="editor"></div>

<script type="module" src="/src/main.ts"></script>

Select text and add a comment. The thread should show Alex Rivera as its author. Reply, resolve, and reopen actions are available by default.

Configure comments

Choose a group, then choose a field. Each entry shows its type, default, and a configuration fragment you can copy.

Use layout: 'auto' to switch between sidebar and inline threads according to the available width. Use interaction.comments.level: 'write' when people may participate in a thread but your application keeps the final resolve decision.

The comment level does not control tracked-change decisions. Configure those in Track changes.

These options change browser interaction; they are not an authorization boundary. Enforce document access and comment permissions in a trusted backend.

Verify the round trip

1. Create a comment and reply to it.
2. Resolve or reopen the thread.
3. Export the DOCX and open it again.

The thread, replies, author, and status should remain in the file.

Use custom comments UI when your application should render the thread list or composer. Use Document API comments when code needs to create or update comments directly.