Easy collaborative text editing with Liveblocks Tiptap

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.

Overview

Whether you're launching a new application or enhancing an existing Tiptap editor, enabling fully-featured collaboration takes just minutes.

• Collaborative editing - Modify your document in realtime with others.
• Commenting - Annotate text and leave fully-featured threaded comments.
• Notifications - Display in-app notifications when users are mentioned.
• Instant loading - With offline support, no loading spinners are necessary.
• Multiple editors - Add a number of text editors to one document.
• AI suggestions - Learn how to add AI suggestions with our Novel example.
• Fully customizable - Integrate your editor perfectly into any design.

Sign up for free

To try our Tiptap editor, create a Liveblocks account and get started for free.

Collaborative editing

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.

export function Editor() {  const liveblocks = useLiveblocksExtension();
  const editor = useEditor({    extensions: [liveblocks, StarterKit],  });
  return <EditorContent editor={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.

Commenting

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.

<AnchoredThreads className="desktop" /* ... */ /><FloatingThreads className="mobile" /* ... */ />

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.

<button onClick={() => editor.chain().focus().addPendingComment().run()}>  💬 Add comment</button>

Notifications

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.

Instant loading

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.

const liveblocks = useLiveblocksExtension({  offlineSupport_experimental: true,});

We’ve added offline support to the Next.js Starter Kit—try a live demo now.

Multiple editors

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.

const liveblocks = useLiveblocksExtension({  field: "editor-one",});

You can find a full code snippet in our docs where we suggest a recommended way to set up multiple editors.

AI suggestions

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.

Fully customizable

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.

Coming soon

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.

Upgrade

To use the latest features, update your packages with the following command.

$npx create-liveblocks-app@latest --upgrade

If you were previously on Liveblocks 2.9 or below, make sure to follow our upgrade guides before updating.

Get started now

We have more information on how to get started in our docs, along with an overview, and a detailed API reference.

• Get started with Tiptap.
• Feature overview.
• API reference.

We also have a number of examples using the new package:

• Next.js Starter Kit.
• Novel AI editor.
• Next.js Tiptap advanced.
• Next.js Tiptap basic.