Add Notion-style collaborative text editing to your app with Liveblocks BlockNote

It’s now easier than ever to add a collaborative block-based text editor to your app, filled with features out-of-the-box, with the latest addition to our Text Editor product. I’m delighted to introduce you to Liveblocks BlockNote, 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 BlockNote rich-text editor, enabling fully-featured collaboration takes just minutes.

• Collaborative block-based editing - Realtime document editing 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.
• Customizable - Extend the editor with plugins and custom features.
• Multiple editors - Add a number of text editors to one document.

Collaborative block-based editing

With Liveblocks, BlockNote supports full collaborative editing inside it’s block-based documents, much like you’ll find in Notion. This means multiple users can make changes in realtime, with live cursors showing each user’s modifications in paragraphs, tables, lists, and more.

Setting up collaboration in React is easy, simply connect to Liveblocks and use useCreateBlockNoteWithLiveblocks in your editor to add collaboration. All BlockNote plugins should be supported, meaning you can to add it to any existing editor.

import { useCreateBlockNoteWithLiveblocks } from "@liveblocks/react-blocknote";import { BlockNoteView } from "@blocknote/mantine";
export function Editor() {  const editor = useCreateBlockNoteWithLiveblocks({});  return <BlockNoteView 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, webhooks, and a Node.js SDK for accessing & monitoring your documents.

Commenting

Liveblocks BlockNote 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" /* ... */ />

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 notifications outside of your app too, for example via email or Slack—learn more in our Notifications overview.

Instant loading

Liveblocks BlockNote 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 useCreateBlockNoteWithLiveblocks, but we’re aiming to make it the default in future.

const editor = useCreateBlockNoteWithLiveblocks(  {},  {    offlineSupport_experimental: true,  });

Customizable

It’s easy to customize BlockNote and add new features to your editor with custom blocks, but you can also use the rest of our realtime infrastructure to create collaborative experiences outside of the editor too. For example, below we’ve added cover and icon features, allowing users to customize their document in realtime.

If you’re looking for ideas, make sure to check our examples gallery wherre you can find live avatar stacks, multiplayer canvases, and more.

Multiple editors

Liveblocks BlockNote supports using multiple editors on a single page, each allowing simultaneous edits by different users. You can even drag content from one editor to another.

To add multiple editors to your document, simply provide each with a unique field, and they’ll be treated individually.

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

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

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.15 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 BlockNote
• Feature overview
• API reference

We also have examples using the new package:

• Next.js Starter Kit
• BlockNote basic

Contributors

Contributors include:

5 authors