Add comments to the Editor
Let people create, reply to, and resolve comments that stay in the DOCX.
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 click September 30, 2026 to open its comment. Add a reply, then use the controls above the document:
- Change Layout between Auto, Sidebar, and Inline to compare how the comment surface uses the Editor width.
- Change Actions to Read. Your reply remains, but you cannot add another. Restore Write or Resolve to reply again.
- With Actions → Resolve, choose the checkmark on the thread. Click
September 30, 2026again to see its Resolved status, then choose Reopen comment.
The comments editor is loading.
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
These standalone examples use public/sample.docx from the Quickstart. Replace src/main.ts
or src/App.tsx to try the current user and 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',
},
},
});
For Vanilla, replace the contents of <body> in index.html with the toolbar and Editor mounts below:
<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.
ui.comments.layoutPlace threads in a sidebar, inline with the document, or according to available width.
API details
Where comment threads render (default: `'sidebar'`). `auto` uses the available width to choose between sidebar and inline.
4 fields · generated from CommentsConfig + CommentsResponsiveConfig + CommentInteractionConfig
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
- Create a comment and reply to it.
- Resolve or reopen the thread.
- Use the export and reopen flow from Load and save; the standalone examples above only configure comments.
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.