Get started with a BlockNote text editor using Liveblocks and Next.js

Liveblocks is a realtime collaboration infrastructure for building performant collaborative experiences. Follow the following steps to start adding collaboration to your Next.js application using @liveblocks/react-blocknote with LiveText backed by 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. Create a Liveblocks room

   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. When using Next.js’ /app router, we recommend creating your room in a Room.tsx file in the same directory as your current route.

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

   Set up a Liveblocks client with LiveblocksProvider, join a room with RoomProvider, and use ClientSideSuspense to add a loading spinner to your app.

   app/Room.tsx

   "use client";
   import { ReactNode } from "react";import {  LiveblocksProvider,  RoomProvider,  ClientSideSuspense,} from "@liveblocks/react/suspense";
   export function Room({ children }: { children: ReactNode }) {  return (    <LiveblocksProvider publicApiKey={"pk_prod_xxxxxxxxxx…xxxxxxxxpk_prod_xxxxxxxxxxxxxxxxxxxxxxxx"}>      <RoomProvider id="my-room">        <ClientSideSuspense fallback={<div>Loading…</div>}>          {children}        </ClientSideSuspense>      </RoomProvider>    </LiveblocksProvider>  );}

4. Add the Liveblocks room to your page

   After creating your room file, import it into your page.tsx file and place your editor inside it.

   app/page.tsx

   import { Room } from "./Room";import { Editor } from "./Editor";
   export default function Page() {  return (    <Room>      <Editor />    </Room>  );}

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.

   app/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.

   app/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 in your layout, and add basic editor CSS:

   app/layout.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";

   app/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 Next.js application.

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