How to add a comment
Click the comment button
In the editor toolbar, click the comment icon (speech bubble with a plus sign). This calls
editor.chain().focus().addPendingComment().run(), which attaches a Liveblocks comment mark to your selection and opens a composer.Comments are visible to everyone with access to the document. All collaborators — whether they are currently active in the room or not — can see and reply to any thread.
Threads panel
Once a thread is created, it appears anchored to the highlighted text in two places:- Anchored threads — displayed in a panel to the side of the document, aligned with the relevant text.
- Floating threads — appear as overlays near the selection when you click on annotated text.
<Threads> component, which uses Liveblocks’ AnchoredThreads, FloatingThreads, and FloatingComposer components from @liveblocks/react-tiptap. Only unresolved threads are shown by default.
Replying and resolving threads
Any collaborator can reply to an existing thread directly in the threads panel. When a discussion is complete, you can resolve the thread to remove it from the active view. Resolved threads are filtered out automatically — only open threads are displayed.Inbox notifications
The bell icon in the document navbar opens your inbox. It shows a count badge when you have unread activity, and the dropdown lists each notification using Liveblocks’InboxNotificationList. Clicking a notification takes you to the relevant thread in the document.
Inbox data comes from the useInboxNotifications hook provided by Liveblocks and reflects comment replies and mentions in documents you have access to.