Collaboration

Enable multiple users to edit the same document simultaneously with real-time collaboration powered by Yjs.

Choose your approach

Cloud Providers

No server to manage — get started in minutes.

Provider	Best For	Pricing
Liveblocks	Quick start, any framework	Free tier available

Self-Hosted

Full control over your data and infrastructure.

Option	Best For
SuperDoc Yjs	Recommended — the official package
Hocuspocus	TipTap ecosystem users

Quick start

Get collaboration working in 5 minutes with Liveblocks:

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";

const client = createClient({ publicApiKey: "pk_..." });
const { room } = client.enterRoom("my-document");
const ydoc = new Y.Doc();
const provider = new LiveblocksYjsProvider(room, ydoc);

provider.on("sync", (synced) => {
  if (!synced) return;

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

See the full quickstart guide for framework-specific examples (React, Vue, Vanilla JS).

Start collaborative immediately or later

Start in collaboration mode

Create your Yjs provider first, then pass { ydoc, provider } in modules.collaboration when you construct SuperDoc.

Upgrade later

Mount a local SuperDoc first, then call superdoc.upgradeToCollaboration({ ydoc, provider }) when the user creates a shared room.

If you are also using the SDK for backend automation, see SDK collaboration sessions.