Tiptap Comments

Launching Tiptap Comments

We released Tiptap Comments on March 13, 2024. It was a paid feature designed to let our users build rich, collaborative review workflows directly inside their Tiptap-based editors.

The idea was simple: give teams the ability to leave feedback, ask questions, and discuss content — right where the content lives. No more switching between an editor and a separate commenting tool.

How it works

Threads and comments are built completely headless. We provide the engine — you bring the UI. Comments live on collaborative Yjs documents, sync in real time across all connected users, and render automatically inside a Tiptap editor with proper user ownership.

The system supports all kinds of content nodes:

• Block-level content — entire paragraphs, images, or embeds
• Inline nodes — specific words, phrases, or selections within a paragraph

Each thread or comment can contain rich content — not just plain text. Users can include formatted text, links, code snippets, or attachments. It works the way a modern collaboration tool should.

The hard part

The biggest challenge was building a reliable bridge between Yjs and the ProseMirror frontend. We needed two storage layers — the Yjs document and our comment store — to stay in perfect sync without drifting apart over time.

Tracking content positions in ProseMirror is already non-trivial. Doing it across Yjs relative positions introduces a whole new set of problems. Yjs relative positions have well-known limitations, and working around them required deep understanding of both ProseMirror’s position model and Yjs’s internal structure.

The solution

After a lot of iteration, we landed on an architecture that handles sync reliably. The result is a system that lets developers:

• Integrate comments quickly with minimal boilerplate
• Open, close, reply, and resolve threads in real time
• Access and manipulate comments not just from the editor — but from the server, via API, or through webhooks

This means you can build custom moderation flows, trigger notifications, or sync comments with external systems — all without touching the editor component.