> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superdoc.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Collaboration

Enable multiple users to edit the same document simultaneously with real-time collaboration powered by [Yjs](https://docs.yjs.dev/).

<Note>
  Collaboration is configured through `modules.collaboration` today, but it isn't a built-in UI surface. It controls document sync, providers, presence, and persistence for collaborative editing: infrastructure, not rendering. Use it alongside any UI choice ([Custom UI](/editor/custom-ui/overview), built-in UI, or both).
</Note>

<iframe src={`https://superdoc-collab-example.pages.dev/doc/example?hide-toolbar=true`} title="Embedded content" className="w-full h-96 rounded-xl border border-gray-200" style={{ zoom: 0.7, height: "510px" }} />

## Choose your approach

<Tabs>
  <Tab title="Cloud Providers">
    No server to manage: get started in minutes.

    | Provider                                       | Best For                   | Pricing             |
    | ---------------------------------------------- | -------------------------- | ------------------- |
    | [Liveblocks](/guides/collaboration/liveblocks) | Quick start, any framework | Free tier available |
  </Tab>

  <Tab title="Self-Hosted">
    Full control over your data and infrastructure.

    | Option                                             | Best For                                                                              |
    | -------------------------------------------------- | ------------------------------------------------------------------------------------- |
    | [YHub](/guides/collaboration/yhub)                 | Advanced Yjs backend for attribution, activity, and revision-history workflows. Beta. |
    | [Hocuspocus](/guides/collaboration/hocuspocus)     | Mature self-hosted Yjs server with auth, persistence, and scaling hooks.              |
    | [SuperDoc Yjs](/guides/collaboration/superdoc-yjs) | Minimal reference server. Not production infrastructure.                              |
  </Tab>
</Tabs>

## Quick start

Get collaboration working in 5 minutes with Liveblocks:

```bash theme={null}
npm install @liveblocks/client @liveblocks/yjs yjs
```

```javascript theme={null}
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: "john@example.com" },
    modules: {
      collaboration: { ydoc, provider },
    },
  });
});
```

See the [full quickstart guide](/editor/collaboration/quickstart) for framework-specific examples (React, Vue, Vanilla JS).

## Start collaborative immediately or later

<CardGroup cols={2}>
  <Card title="Start in collaboration mode" href="/editor/collaboration/quickstart">
    Create your Yjs provider first, then pass `{ ydoc, provider }` in
    `modules.collaboration` when you construct `SuperDoc`.
  </Card>

  <Card title="Upgrade later" href="/editor/collaboration/upgrade-to-collaboration">
    Mount a local `SuperDoc` first, then call
    `superdoc.upgradeToCollaboration({ ydoc, provider })` when the user creates
    a shared room.
  </Card>
</CardGroup>

If you are also using the SDK for backend automation, see [SDK collaboration sessions](/document-engine/sdks#collaboration-sessions).