Subscription Required After Beta Period
You can test Tiptap Comments for free while it's in beta. After beta, it'll be included in the Entry, Business, or Enterprise grid. See pricing
Comments features
Comments on text, images, or any type of node
Users can add comments to any node in the Tiptap editors document (such as text, tables, images, ...), even custom nodes. They can also add comments to text marked by their cursor. It's even possible to overlap comments when users mark the same text with their cursor.
Resolve, edit, react, and delete comments
As you would expect from other productivity apps such as Google Docs, users can add, edit, resolve, react and delete comments.
Mentions, emojis, links, and rich text support in comments
To make comments as productive and vibrant as possible, you can enrich the Comments composer field with other Tiptap features like mentions (via the mention extension), links, emojis and rich text (such as bold, underline, italic, lists, …).
Basic example of how to add a comment to the Tiptap editor
const provider = new TiptapCollabProvider(...)
const editor = useEditor({
extensions: [Comments.configure({ provider })],
// ...
})
editor.setThread({ content: 'This is my comment content', data: { name: 'John Doe' }})
Threads on comments
Tiptap's Comments organizes discussions into threads for clear, contextual collaboration.
Users can simply select text or a node in the editor and start a comment, which can become a thread. Other users can then add comments to that thread, as well as edit or remove their own comments within that thread.
However, they cannot mark their comments as resolved because they are considered part of the thread discussion. Only the entire thread can be marked as resolved or unresolved again. It's pretty much the same behavior you know from Google Docs.
Webhook support on comments
The Comments webhook function is designed to handle granular events. Common use cases are:
- Sending notifications when a thread is created, resolved, updated, or deleted.
- Notifying users when comments are added, updated, or deleted.
- In conjunction with the Tiptap mention extension, send emails or in-app notifications to users when they are mentioned in comments.
Comments webhooks trigger notifications for a variety of events related to threads and comments. The following events are triggered as soon as the corresponding action occurs in the comments, ensuring timely notifications without grouping or delay:
comment.addedcomment.updatedcomment.deletedthread.createdthread.resolvedthread.updatedthread.deleted
Comments Editor API
The Comments Editor API focuses on the client-side interactions for managing comments within the editor environment, enabling direct manipulation and customization of comment threads.
Commands that are available on the client side:
setThread({ content, data, commentData })removeThread({ id, deleteThread })updateThread({ id, data })selectThread({ id, selectAround })unselectThread()resolveThread({ id })unresolveThread({ id })createComment({ threadId, content, data })updateComment({ threadId, id, content, data })deleteComment({ threadId, id })
Comments REST API
The Comments REST API is designed for server-side operations, allowing for broader management tasks such as creating, retrieving, updating, and deleting documents or comments programmatically. Explore the Comments Postman Collection for a hands-on experience that allows you to experiment with the capabilities of the REST API.
Typical use cases for this REST API include:
- Thread Management: Create or delete discussion threads associated with specific parts of a document.
- Comment Management: Add, update, or remove comments within these threads to facilitate discussion.
Read the docs: https://tiptap.dev/docs/editor/comments/introduction
We'd love to hear your feedback!
If you have any feedback or questions, write us at humans@tiptap.dev.
