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

> **Interactive editor: Try comments**
>
> Sample: [open the fixture](/fixtures/comments-sample.docx).
>
> Preset: `comments`.
>
> Comment configurations available in the interactive Editor:
>
> - **Layout — `ui.comments.layout`:** choose `auto`, `sidebar`, or `inline`. Auto selects sidebar or inline from the Editor width.
> - **Actions — `interaction.comments.level`:** choose `read`, `write`, or `resolve`. Read shows threads without mutation controls. Write adds create, reply, edit, and delete. Resolve also adds resolve and reopen.
>
> The sample contains one comment thread anchored to `September 30, 2026`.
>
> Local DOCX selection: disabled.


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](/editor/load-and-save-documents).

## Add the built-in comments UI [#add-the-built-in-comments-ui]

Continue with `/sample.docx` from the [Quickstart](/editor/quickstart). Add the current user and set the comments layout:

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

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

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

```

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

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

const editorConfig = {
  user: {
    name: 'Alex Rivera',
    email: 'alex@example.com',
  },
  ui: {
    comments: {
      layout: 'auto',
    },
  },
} satisfies Pick<SuperDocEditorProps, 'user' | 'ui'>;

export default function App() {
  return <SuperDocEditor document='/sample.docx' user={editorConfig.user} ui={editorConfig.ui} />;
}

```


Vanilla also needs separate toolbar and Editor mounts:

```html
<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 [#configure-comments]

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

### Layout

| Field | Type | Default | Status | Summary | API details | Guide |
| --- | --- | --- | --- | --- | --- | --- |
| `ui.comments.layout` | `"auto" \| "sidebar" \| "inline"` | `'sidebar'` | Optional | Place threads in a sidebar, inline with the document, or according to available width. | Where comment threads render (default: `'sidebar'`). `auto` uses the available width to choose between sidebar and inline. | — |

### Responsive

| Field | Type | Default | Status | Summary | API details | Guide |
| --- | --- | --- | --- | --- | --- | --- |
| `ui.comments.responsive.target` | `string \| HTMLElement` | — | Optional | Measure this element when layout is auto. | Element whose width controls the layout. Pass an element or a CSS selector. Defaults to the nearest measurable Editor ancestor. | — |
| `ui.comments.responsive.breakpoint` | `number` | — | Optional | Switch to inline threads below this width when layout is auto. | Switch from sidebar to inline below this width, in CSS pixels. When omitted, SuperDoc derives the threshold from the document and sidebar. | — |

### Actions

| Field | Type | Default | Status | Summary | API details | Guide |
| --- | --- | --- | --- | --- | --- | --- |
| `interaction.comments.level` | `"read" \| "write" \| "resolve"` | `'resolve'` | Optional | Allow reading only, writing comments, or resolving and reopening threads. | The highest comment interaction level this Editor allows (default: `resolve`). `read` allows reading threads only. `write` also allows create, reply, edit, and delete. `resolve` also allows resolve and reopen. | — |


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](/editor/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 [#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](/editor/custom-ui/comments) when your application should render the thread list or composer. Use
[Document API comments](/document-api/comments) when code needs to create or update comments directly.