Get started with a Tiptap text editor using Liveblocks Storage 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 collaborationMode: "liveblocks". This stores text as LiveText backed by Liveblocks Storage instead of using a Yjs document.

Quickstart

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

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

3. 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={"pk_prod_xxxxxxxxxx…xxxxxxxxpk_prod_xxxxxxxxxxxxxxxxxxxxxxxx"}>      <RoomProvider id="my-room">        {/* ... */}      </RoomProvider>    </LiveblocksProvider>  );}

4. 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={"pk_prod_xxxxxxxxxx…xxxxxxxxpk_prod_xxxxxxxxxxxxxxxxxxxxxxxx"}>      <RoomProvider id="my-room">        <ClientSideSuspense fallback={<div>Loading…</div>}>          <Editor />        </ClientSideSuspense>      </RoomProvider>    </LiveblocksProvider>  );}

5. 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>  );}

6. 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"      />    </>  );}

7. 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";

   globals.css

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

• Liveblocks collaboration mode
• @liveblocks/react-tiptap API Reference
• Yjs-backed Tiptap React quickstart
• Tiptap website