Get started with a Tiptap text editor using Liveblocks and React

Liveblocks is a realtime collaboration infrastructure for building performant collaborative experiences. Follow the following steps to start adding collaboration to your React application using @liveblocks/react-tiptap with LiveText backed by Liveblocks Storage.

Beta

The Tiptap LiveText integration is currently in beta, and LiveText documents are limited to 2 MB. Read the LiveText vs Yjs guide to compare both approaches.

Quickstart

Install Liveblocks and Tiptap

Every Liveblocks package should use the same version.

Terminal

npm install @liveblocks/client @liveblocks/react @liveblocks/react-ui @liveblocks/react-tiptap @tiptap/react @tiptap/starter-kit

Initialize the liveblocks.config.ts file
We can use this file later to define types for our application.
Terminal
npx create-liveblocks-app@latest --init --framework react

Set up the Liveblocks client

Liveblocks uses the concept of rooms, separate virtual spaces where people collaborate, and to create a realtime experience, multiple users must be connected to the same room. Set up a Liveblocks client with LiveblocksProvider, and join a room with RoomProvider.

In Storage mode, documents are created under root._tiptap_docs when the editor first connects, so you can leave initialStorage empty.

App.tsx

"use client";
import {  LiveblocksProvider,  RoomProvider,} from "@liveblocks/react/suspense";import { Editor } from "./Editor";
export default function App() {  return (    <LiveblocksProvider publicApiKey={""}>      <RoomProvider id="my-room">        {/* ... */}      </RoomProvider>    </LiveblocksProvider>  );}

Join a Liveblocks room

After setting up the room, you can add collaborative components inside it, using ClientSideSuspense to add loading spinners to your app.

App.tsx

"use client";
import {  LiveblocksProvider,  RoomProvider,  ClientSideSuspense,} from "@liveblocks/react/suspense";import { Editor } from "./Editor";
export default function App() {  return (    <LiveblocksProvider publicApiKey={""}>      <RoomProvider id="my-room">        <ClientSideSuspense fallback={<div>Loading…</div>}>          <Editor />        </ClientSideSuspense>      </RoomProvider>    </LiveblocksProvider>  );}

Set up the collaborative Tiptap editor

Create a Tiptap editor in Editor.tsx. Pass collaborationMode: "liveblocks" to useLiveblocksExtension so the document syncs through Storage. Set a field name and optional initialContent for the first visit.

Editor.tsx

"use client";
import {  FloatingComposer,  FloatingToolbar,  useLiveblocksExtension,} from "@liveblocks/react-tiptap";import { useEditor, EditorContent } from "@tiptap/react";import StarterKit from "@tiptap/starter-kit";import { Threads } from "./Threads";
const INITIAL_CONTENT = {  type: "doc",  content: [    {      type: "paragraph",      content: [{ type: "text", text: "Hello world" }],    },  ],};
export function Editor() {  const liveblocks = useLiveblocksExtension({    collaborationMode: "liveblocks",    field: "document",    initialContent: INITIAL_CONTENT,  });
  const editor = useEditor({    extensions: [      liveblocks,      StarterKit.configure({        // The Liveblocks extension comes with its own history handling        undoRedo: false,      }),    ],    immediatelyRender: false,  });
  return (    <div>      <EditorContent editor={editor} className="editor" />      <Threads editor={editor} />      <FloatingToolbar editor={editor} />      <FloatingComposer editor={editor} className="floating-composer" />    </div>  );}

Render threads

Comments work the same as in Yjs mode. Create a Threads.tsx file that uses FloatingThreads and AnchoredThreads.

Threads.tsx

import { useThreads } from "@liveblocks/react/suspense";import {  AnchoredThreads,  FloatingThreads,} from "@liveblocks/react-tiptap";import { Editor } from "@tiptap/react";
export function Threads({ editor }: { editor: Editor | null }) {  const { threads } = useThreads({ query: { resolved: false } });
  return (    <>      <div className="anchored-threads">        <AnchoredThreads editor={editor} threads={threads} />      </div>      <FloatingThreads        editor={editor}        threads={threads}        className="floating-threads"      />    </>  );}

Style your editor

Import Liveblocks styles, and add basic editor CSS:

main.tsx

import "@liveblocks/react-ui/styles.css";import "@liveblocks/react-tiptap/styles.css";import "./globals.css";

Next: authenticate and add your users
Text Editor is set up and working now, but each user is anonymous—the next step is to authenticate each user as they connect, and attach their name, color, and avatar, to their cursors and mentions.
Add your users to Text Editor

What to read next

Congratulations! You now have set up a Storage-backed collaborative Tiptap editor inside your React application.