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](/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](https://tiptap.dev/) editor, enabling fully-featured collaboration
takes just minutes.

- [Collaborative editing](#collaborative-editing) - Modify your document in
  realtime 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.
- [Multiple editors](#multiple-editors) - Add a number of text editors to one
  document.
- [AI suggestions](#ai-suggestions) - Learn how to add AI suggestions with our
  Novel example.
- [Fully customizable](#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.

<ButtonLink className="mb-6" appearance="primary" href="/dashboard">
  Get started for free
</ButtonLink>

## Collaborative editing [#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.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/tiptap-official-launch/tiptap-launch-cursor.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

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

```tsx highlight="2,5"
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](/docs/api-reference/rest-api-endpoints) and
[webhooks](/docs/platform/webhooks) for accessing & monitoring your documents.

## Commenting [#commenting]

Liveblocks Tiptap 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/tiptap-official-launch/tiptap-launch-comments.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

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

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

It’s also easy to build your own custom toolbar, and we provide options such as
[`addPendingComment`](/docs/api-reference/liveblocks-react-tiptap#Opening-the-composer)
which allows you to open the new comment composer.

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

## Notifications [#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/tiptap-official-launch/tiptap-launch-notifications.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

You can also extend this to send email or Slack notifications to your
users—learn more in our [Notifications overview](/docs/products/notifications).

## Instant loading [#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.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/tiptap-official-launch/tiptap-launch-quick.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

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

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

We’ve added offline support to the
[Next.js Starter Kit](/nextjs-starter-kit)—try a
[live demo](https://nextjs-starter-kit.liveblocks.app) now.

## Multiple editors [#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.

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

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

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

## AI suggestions [#ai-suggestions]

AI is becoming an important part of the workplace, which is why we’ve built an
example using [Novel](https://novel.sh), 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.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/tiptap-official-launch/tiptap-launch-novel.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

## Fully customizable [#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.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/tiptap-official-launch/tiptap-launch-linear.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

## 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](https://x.com/liveblocks),
[LinkedIn](https://www.linkedin.com/company/liveblocks/), and
[Bluesky](https://bsky.app/profile/liveblocks.io) for updates.

## 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.9 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 Tiptap](/docs/get-started/text-editor/tiptap).
- [Feature overview](/docs/products/text-editor/tiptap).
- [API reference](/docs/api-reference/liveblocks-react-tiptap).

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

- [Next.js Starter Kit](/nextjs-starter-kit).
- [Notion-like AI editor](/examples/notion-like-ai-editor/nextjs-notion-like-ai-editor).
- [Next.js Tiptap advanced](/examples/collaborative-text-editor-advanced/nextjs-tiptap-advanced).
- [Next.js Tiptap basic](/examples/collaborative-text-editor/nextjs-tiptap).