Get started with a BlockNote 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-blocknote with LiveText backed by Liveblocks Storage.

Quickstart

1. Install Liveblocks and BlockNote

   Every Liveblocks package should use the same version.

   Terminal

   npm install @liveblocks/client @liveblocks/react @liveblocks/react-ui @liveblocks/react-blocknote @blocknote/core @blocknote/react @blocknote/mantine

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 a loading spinner 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 BlockNote editor

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

   Editor.tsx

   "use client";
   import { useCreateBlockNoteWithLiveblocks } from "@liveblocks/react-blocknote";import { BlockNoteView } from "@blocknote/mantine";import { Threads } from "./Threads";
   export function Editor() {  const editor = useCreateBlockNoteWithLiveblocks(    {},    {      collaborationMode: "liveblocks",      field: "document",      initialContent: "<p>Hello world</p>",    }  );
     return (    <div>      <BlockNoteView editor={editor} className="editor" />      <Threads editor={editor} />    </div>  );}

6. Render threads

   Comments work the same as in Yjs mode. Create a Threads.tsx file that uses FloatingComposer for creating new threads, alongside AnchoredThreads and FloatingThreads for displaying threads on desktop and mobile.

   Threads.tsx

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

7. Style your editor

   Import the default BlockNote and Liveblocks styles, and add basic editor CSS:

   main.tsx

   import "@blocknote/core/fonts/inter.css";import "@blocknote/mantine/style.css";import "@liveblocks/react-ui/styles.css";import "@liveblocks/react-ui/styles/dark/media-query.css";import "@liveblocks/react-blocknote/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 BlockNote editor inside your React application.

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