Introducing first-party support for BlockNote, a block-based rich-text editor for React. Get started with your text editor in minutes, and take advantage of collaborative editing, commenting, offline support, and much more.
Join thousands of companies using Liveblocks ready‑made collaborative features to drive growth in their products.
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.
To add a collaborative BlockNote editor to your app, create a Liveblocks account and get started for free.
Whether you're launching a new application or enhancing an existing BlockNote rich-text editor, enabling fully-featured collaboration takes just minutes.
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.
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.
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.
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.
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.
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.
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.
You can find a full code snippet in our docs where we suggest a recommended way to set up multiple editors.
To use the latest features, update your packages with the following command.
If you were previously on Liveblocks 2.15 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 examples using the new package:
Contributors include:
5 authors
