Realtime Collaboration

Add multi-user editing to Edra with Hocuspocus + Yjs. Not bundled by default — opt-in via collaborative.

1. How it works

• Yjs CRDT keeps one Y.Doc per room, synced over WebSocket.
• Hocuspocus is the WebSocket server that holds/auths/persists rooms.
• Edra with collaborative: true disables StarterKit history (undo/redo) — Yjs owns it. Just add Collaboration + CollaborationCaret.

2. Install

Peer deps: yjs, @hocuspocus/provider (client) and @hocuspocus/server (server).

3. Server

Minimal standalone Hocuspocus server. Host it anywhere Node runs.

See Hocuspocus docs for auth, persistence (DB/Redis), and scaling options.

Environment

4. Client

Create the Y.Doc + HocuspocusProvider on the browser only, then pass them to createEditor with collaborative: true.

5. User identity (name & color)

Other cursors show { name, color }. Update at runtime:

6. Caveats

• Create the editor outside onMount (guard with browser) so Tiptap's Svelte effects have a valid lifecycle.
• Clean up with editor.destroy() / provider.destroy() / ydoc.destroy() on unmount.
• One room = one name passed to HocuspocusProvider. Use auth tokens per user if needed.

7. Headless flavor

Same idea with createEditor from $lib/edra/headless/index.js — also accepts { collaborative: true, extensions: [...] }.