Collaboration

npm install @liveblocks/client @liveblocks/yjs yjs

import { createClient } from "@liveblocks/client";
import { LiveblocksYjsProvider } from "@liveblocks/yjs";
import * as Y from "yjs";
import { SuperDoc } from "superdoc";

// 1. Create Liveblocks client
const client = createClient({ publicApiKey: "pk_..." });

// 2. Enter a room and create Yjs provider
const { room } = client.enterRoom("my-document");
const ydoc = new Y.Doc();
const provider = new LiveblocksYjsProvider(room, ydoc);

// 3. Wait for sync, then create SuperDoc
provider.on("sync", (synced) => {
  if (!synced) return;

  new SuperDoc({
    selector: "#editor",
    user: { name: "John", email: "[email protected]" },
    modules: {
      collaboration: { ydoc, provider },
    },
  });
});