Introducing first-party support for Tiptap, a highly extensible rich-text editor. Get started with your text editor in minutes, and take advantage of collaborative editing, commenting, offline support, AI suggestions, and much more.
Join thousands of companies using Liveblocks to build multiplayer experiences for people and agents.
It’s now easier than ever to add a collaborative text editor to your app, filled to the brim with collaborative features, with the latest addition to our Text Editor product. I’m delighted to introduce you to Liveblocks Tiptap, our fully-managed, highly scalable realtime data store for text documents in React.
Whether you're launching a new application or enhancing an existing Tiptap editor, enabling fully-featured collaboration takes just minutes.
To try our Tiptap editor, create a Liveblocks account and get started for free.
Get started for free
Our new editor supports full collaborative editing, much like you’ll find in Google Docs. This means multiple users can make changes in realtime, with live cursors showing their modifications. And because Tiptap is a rich-text editor, it’s not only text that updates, but formatting, tables, checkboxes, and more.
Setting up collaboration in React is
easy, simply connect to Liveblocks and use
useLiveblocksExtension
in your editor to add collaboration. All Tiptap plugins should be supported,
meaning you can to add it to any existing editor.
The back end is handled entirely by Liveblocks, meaning you don’t need to store your documents or save updates. It’s entirely automatic, and we provide additional REST APIs and webhooks for accessing & monitoring your documents.
Liveblocks Tiptap integrates into our other products, such as Comments, which enables users to annotate text and leave feedback. Each annotation creates a threaded comment section, fully-featured with attachments, emoji reactions, mentions, and more.
We provide two separate components for displaying threads,
AnchoredThreads,
as shown above, is ideal for displaying a sidebar on wide screens, and
FloatingThreads,
designed for displaying floating comments on narrow screens.
It’s also easy to build your own custom toolbar, and we provide options such as
addPendingComment
which allows you to open the new comment composer.
Another product that’s integrated is Notifications, which provides a way to quickly add an inbox to your application. When a user is mentioned in the text editor, or participating in a thread, a notification is created in their inbox.
You can also extend this to send email or Slack notifications to your users—learn more in our Notifications overview.
Liveblocks Tiptap loads instantly thanks to its offline support option. Offline support means that once a document has been opened, it’s saved locally on the browser, and can be shown instantly without a loading screen. After a second, Liveblocks connects, and changes are automatically synchronized.
This is currently an experimental feature that you can enable with
useLiveblocksExtension,
but we’re aiming to make it the default in future.
We’ve added offline support to the Next.js Starter Kit—try a live demo now.
Liveblocks Tiptap supports using multiple editors on a single page, each allowing simultaneous edits by different users. Each editor has its own cursors and extensions, and you can even dynamically create editors on the fly.
To add multiple editors to your document, simply give each one a unique field
name, and they’ll be treated individually.
You can find a full code snippet in our docs where we suggest a recommended way to set up multiple editors.
AI is becoming an important part of the workplace, which is why we’ve built an example using Novel, an editor that allows you to select text and request AI suggestions. On top of this, it has an extensive collection of features set up for you, and all usual Liveblocks features are fully integrated.
Design is important to the Liveblocks team, and we believe it’s integral to allow real customization in your editor. This is why we’ve made it possible to style your editor however you like, meaning it can fit seamlessly into any design system.
We’ve made a start, but we’re not finished yet—more exciting features are on the horizon, including version history, a Node.js SDK, and some AI explorations. Make sure to follow us X, LinkedIn, and Bluesky for updates.
To use the latest features, update your packages with the following command.
If you were previously on Liveblocks 2.9 or below, make sure to follow our upgrade guides before updating.
We have more information on how to get started in our docs, along with an overview, and a detailed API reference.
We also have a number of examples using the new package:
