Comments

Headless supported
Headless supported

Comments allow users to add comments and replies within documents, facilitating communication and collaboration among team members.

Plugin Mode

Installation

Shell
pnpm add @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs/docs-thread-comment @univerjs/docs-thread-comment-ui

Usage

TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverDocsThreadCommentPlugin } from '@univerjs/docs-thread-comment'import { UniverDocsThreadCommentUIPlugin } from '@univerjs/docs-thread-comment-ui'import { UniverThreadCommentPlugin } from '@univerjs/thread-comment'import { UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui'import DocsCommentLocale from '@univerjs/docs-thread-comment-ui/locale/en-US'import ThreadCommentUIEnUS from '@univerjs/thread-comment-ui/locale/en-US'import '@univerjs/docs-thread-comment/facade'import '@univerjs/docs-thread-comment-ui/lib/index.css'import '@univerjs/thread-comment-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      ThreadCommentUIEnUS,      DocsCommentLocale,     ),  },})univer.registerPlugin(UniverThreadCommentPlugin)univer.registerPlugin(UniverThreadCommentUIPlugin)univer.registerPlugin(UniverDocsThreadCommentPlugin)univer.registerPlugin(UniverDocsThreadCommentUIPlugin)

Using with Collaboration Feature

If you are using the Collaboration feature, configure it as follows:

Shell
pnpm add @univerjs-pro/thread-comment-datasource
TypeScript
import { UniverThreadCommentDataSourcePlugin } from '@univerjs-pro/thread-comment-datasource'univer.registerPlugin(UniverThreadCommentDataSourcePlugin)

Mobile support

First configure the mobile editor. In this page’s plugin-mode setup, replace the desktop registrations below with their mobile exports from the same packages, before opening a document. Keep the model plugins, styles, locales and Facade imports; do not register both variants.

PackageDesktop registrationMobile registration
@univerjs/docs-thread-comment-uiUniverDocsThreadCommentUIPluginUniverDocsThreadCommentMobileUIPlugin
@univerjs/thread-comment-uiUniverThreadCommentUIPluginUniverThreadCommentMobileUIPlugin

Preset Mode

Installation

Shell
pnpm add @univerjs/preset-docs-thread-comment

Usage

TypeScript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'import { UniverDocsThreadCommentPreset } from '@univerjs/preset-docs-thread-comment'import UniverPresetDocsThreadCommentEnUS from '@univerjs/preset-docs-thread-comment/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-core/lib/index.css'import '@univerjs/preset-docs-thread-comment/lib/index.css'const { univerAPI } = createUniver({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      UniverPresetDocsCoreEnUS,      UniverPresetDocsThreadCommentEnUS,     ),  },  presets: [    UniverDocsCorePreset(),    UniverDocsThreadCommentPreset(),   ],})

Comment Facade

Import both the shared comment Facade and the product Facade before calling these methods. Product helpers create stable anchors; the shared API handles replies, updates, resolution, and deletion. getComments() reads local state. listCommentsAsync() synchronizes already known threads through the configured data source; it does not discover every thread on the server.

TypeScript
import '@univerjs/thread-comment/facade'import '@univerjs/docs-thread-comment/facade'const range = univerAPI.getActiveDocument()?.getTextRange(0, 1)if (range) {  await range.createCommentAsync('Please review this text.')  console.log(await range.listCommentsAsync())}
TypeScript
import '@univerjs/thread-comment/facade'const [thread] = univerAPI.getComments({ resolved: false })if (thread) {  await univerAPI.replyCommentAsync({    unitId: thread.unitId,    subUnitId: thread.subUnitId,    threadId: thread.threadId,    content: 'Reviewed.',  })}

Shared discussions

For shared discussions, integrate the Comment Service and Endpoint with Server SDK, then register UniverThreadCommentDataSourcePlugin from @univerjs-pro/thread-comment-datasource after collaboration and license setup. The supplied data source uses /universer-api/comment/unit/{unitId}/... and /universer-api/user/list; expose those routes through your application. Server permissions must cover comment reads and writes independently of document editing.

Comments on images and charts

After configuring the host drawing or chart plugins, add the corresponding integration below and its Facade entry before opening the Unit. These integrations must be registered explicitly in both plugin and preset mode; they have no additional styles or locales.

Shell
pnpm add @univerjs-pro/docs-drawing-thread-comment @univerjs-pro/docs-chart-thread-comment
TypeScript
import { UniverDocsDrawingThreadCommentPlugin } from '@univerjs-pro/docs-drawing-thread-comment'import { UniverDocsChartThreadCommentPlugin } from '@univerjs-pro/docs-chart-thread-comment'import '@univerjs-pro/docs-drawing-thread-comment/facade'import '@univerjs-pro/docs-chart-thread-comment/facade'univer.registerPlugin(UniverDocsDrawingThreadCommentPlugin)univer.registerPlugin(UniverDocsChartThreadCommentPlugin)

On an open Unit, create comments on existing images or charts. getComments() returns locally loaded threads; listCommentsAsync() synchronizes known threads before returning them.

TypeScript
const host = univerAPI.getActiveDocument()const image = host?.getImages()[0]const chart = host?.getCharts()[0]await image?.createCommentAsync('Review this image.')await chart?.createCommentAsync('Verify the chart source.')

@univerjs-pro/docs-drawing-thread-comment · @univerjs-pro/docs-chart-thread-comment

How is this guide?

© 2026 DreamNum Co., Ltd.