Install the Comments extension

Subscription required

This extension requires a valid Entry, Business or Enterprise subscription and a running Tiptap Cloud instance. To install the extension, you need access to our private registry. Set this up before proceeding.

npm install @tiptap-pro/extension-comments

Integrating the Comments extension

After installing the comments extension via npm or any other package manager, you can use it in your editor by registering the extension in the extensions property of your editor instance.

The Comments extension consists of multiple components, including nodes and plugins. To include all the required features, use the CommentsKit extension.

import { ThreadsKit } from '@tiptap-pro/extension-comments'

const editor = new Editor({
  ...
  extensions: [
    ...,
    CommentsKit,
  ]
})

This will add all required extensions to your editor. Since Threads are a cloud or on premises feature you will need to also pass through a TiptapCollabProvider instance to your comments extension.

const collabProvider = new TiptapCollabProvider({
  // your provider options
})

const editor = new Editor({
  ...
  extensions: [
    ...,
    CommentsKit.configure({
      provider: collabProvider,
      useLegacyWrapping: false, // optional, will be the default in the future
    }),
  ]
})

Your editor is now ready to support threads.

Important

The new useLegacyWrapping option can be set to false to use a new block wrapping mechanism for multi-line comments. This will become the default in the future.

See a full example of how to use the Comments extension in the following example: