Examples
Collaboration
Collaborative Editing with Liveblocks

Collaborative Editing with Liveblocks

In this example, we use the Liveblocks + BlockNote setup guide (opens in a new tab) to create a collaborative BlockNote editor, where multiple people can work on the same document in real-time.

Users can also add comments to the documents to start threads, which are displayed next to the editor. As well as that, they can react to, reply to, and resolve existing comments.

Try it out: Open this page in a new browser tab or window to see it in action!

Relevant Docs:

From Liveblocks Website:

GitHub
StackBlitz
// See https://liveblocks.io/docs/get-started/react-blocknote to see how this
// example was created, and an explanation for all the code.
import {
  ClientSideSuspense,
  LiveblocksProvider,
  RoomProvider,
} from "@liveblocks/react/suspense";
import "@liveblocks/react-ui/styles.css";
import "@liveblocks/react-ui/styles/dark/media-query.css";
import "@liveblocks/react-tiptap/styles.css";
 
import { Editor } from "./Editor.js";
import "./globals.css";
import "./styles.css";
 
export default function App() {
  return (
    <LiveblocksProvider
      publicApiKey={
        "pk_prod_6iVYNrHvG98GvWioAutXrhTkpG0iQLrzUK3nfWT4_VKWl6NIrlt112YD29to9gQH"
      }>
      <RoomProvider id="my-room">
        <ClientSideSuspense fallback={<div>Loading…</div>}>
          <Editor />
        </ClientSideSuspense>
      </RoomProvider>
    </LiveblocksProvider>
  );
}
Collaborative Editing with PartyKitCollaborative Editing with Y-Sweet