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.

<MarketingCallout>
  To add a collaborative BlockNote editor to your app, create a Liveblocks
  account and get started for free.
</MarketingCallout>

## Overview

Whether you're launching a new application or enhancing an existing
[BlockNote rich-text editor](https://www.blocknotejs.org/), enabling
fully-featured collaboration takes just minutes.

- [Collaborative block-based editing](#collaborative-block-based-editing) -
  Realtime document editing with others.
- [Commenting](#commenting) - Annotate text and leave fully-featured threaded
  comments.
- [Notifications](#notifications) - Display in-app notifications when users are
  mentioned.
- [Instant loading](#instant-loading) - With offline support, no loading
  spinners are necessary.
- [Customizable](#customizable) - Extend the editor with plugins and custom
  features.
- [Multiple editors](#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.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/blocknote/blocknote-collab.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

Setting up collaboration in React is easy, simply connect to Liveblocks and use
[`useCreateBlockNoteWithLiveblocks`](/docs/api-reference/liveblocks-react-blocknote#useCreateBlockNoteWithLiveblocks)
in your editor to add collaboration. All BlockNote plugins should be supported,
meaning you can to add it to any existing editor.

```tsx
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](/docs/api-reference/rest-api-endpoints),
[webhooks](/docs/platform/webhooks), and a
[Node.js SDK](/docs/api-reference/liveblocks-node-prosemirror) for accessing &
monitoring your documents.

## Commenting

Liveblocks BlockNote integrates into our other products, such as
[Comments](/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.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/blocknote/blocknote-comments.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

We provide two separate components for displaying threads,
[`AnchoredThreads`](/docs/api-reference/liveblocks-react-blocknote#AnchoredThreads),
as shown above, is ideal for displaying a sidebar on wide screens, and
[`FloatingThreads`](/docs/api-reference/liveblocks-react-blocknote#FloatingThreads),
designed for displaying floating comments on narrow screens.

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

## Notifications

Another product that’s integrated is [Notifications](/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.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/blocknote/blocknote-notifications.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

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](/docs/products/notifications).

## 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.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/blocknote/blocknote-offline-support.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

This is currently an experimental feature that you can enable with
[`useCreateBlockNoteWithLiveblocks`](/docs/api-reference/liveblocks-react-blocknote#Offline-support),
but we’re aiming to make it the default in future.

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

## Customizable

It’s easy to customize BlockNote and add new features to your editor with
[custom blocks](https://www.blocknotejs.org/docs/custom-schemas/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.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/blocknote/blocknote-customizable.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

If you’re looking for ideas, make sure to check our
[examples gallery](/examples) wherre you can find
[live avatar stacks](/examples/browse/avatar-stack),
[multiplayer canvases](/examples/tldraw-whiteboard/nextjs-tldraw-whiteboard-storage),
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.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/blocknote/blocknote-multiple.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

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

```tsx
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](/docs/api-reference/liveblocks-react-blocknote#Multiple-editors).

## Upgrade

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

```bash
npx create-liveblocks-app@latest --upgrade
```

If you were previously on Liveblocks 2.15 or below, make sure to follow our
[upgrade guides](/docs/platform/upgrading) 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](/docs/get-started/text-editor/blocknote)
- [Feature overview](/docs/ready-made-features/text-editor/blocknote)
- [API reference](/docs/api-reference/liveblocks-react-blocknote)

We also have examples using the new package:

- [Next.js Starter Kit](/nextjs-starter-kit)
- [BlockNote basic](/examples/collaborative-text-editor/nextjs-blocknote)

## Contributors

<Contributors
  gitHubUsernames={[
    "yousefed",
    "jrowny",
    "ctnicholas",
    "sugardarius",
    "nimeshnayaju",
  ]}
/>