Get started with a Tiptap text editor using Liveblocks Storage 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-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. 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 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.

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

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

   app/layout.tsx

   import "@liveblocks/react-ui/styles.css";import "@liveblocks/react-tiptap/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 Tiptap editor inside your Next.js application.

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