Web · Advanced
Collaborative Editor With CRDTs
Build a real-time multiplayer document editor where edits merge without conflicts using a CRDT, sync offline-first over WebSockets, and show live cursors and presence.
You will build a multiplayer rich-text editor backed by Yjs, a production-grade CRDT library, so that two users typing simultaneously always converge to the same document without a server deciding who wins. The project covers the full stack: a React frontend with live cursor overlays, a lightweight WebSocket relay server that broadcasts update messages, and IndexedDB persistence so edits survive a page reload or a network drop. Working through it gives you a concrete mental model of how Google Docs-style collaboration actually works under the hood.
What you build
- Real-time co-editing with automatic conflict-free merging via Yjs Y.Text
- Live remote cursors and user presence indicators keyed by awareness state
- Offline-first editing with IndexedDB persistence through y-indexeddb
- WebSocket sync server that relays Yjs binary update messages between peers
- Undo/redo that is scoped per user so one user cannot undo another's work
- Document awareness panel showing who is currently online and where their cursor sits
What it teaches
- How CRDTs guarantee convergence without operational transforms or a central authority
- Yjs document model: Y.Doc, Y.Text, Y.Map, and the binary update/state-vector protocol
- Offline-first architecture using IndexedDB as a local replica that syncs on reconnect
- WebSocket server design for relaying opaque binary CRDT update blobs between clients
- Awareness protocol for ephemeral presence data that does not need to persist in the CRDT
- Integrating a CRDT backend with a rich-text editor framework through a provider abstraction
How it works
- 1
User Types
- Keystroke captured by Tiptap
- Y.Text mutation emitted
- 2
Local CRDT Update
- Yjs encodes binary delta
- IndexedDB persisted immediately
- 3
WebSocket Relay
- Delta sent to y-websocket server
- Server broadcasts to all room peers
- 4
Remote Peer Merges
- Peer applies binary update
- Y.Text converges automatically
- 5
Presence Sync
- Awareness broadcasts cursor pos
- Remote cursors re-rendered
Sign in to open the build guide
Free account. Get the step-by-step build and every resource link.
Take it further
- Replace the y-websocket relay with a peer-to-peer sync layer using WebRTC via the y-webrtc provider, eliminating the server for same-LAN sessions.
- Add a version history sidebar that snapshots the Y.Doc state at intervals using Y.encodeStateAsUpdate and lets users restore any past revision.
- Compile a custom CRDT data structure in Rust to WebAssembly and benchmark it against the pure-JS Yjs implementation for merge throughput.
