Tagline: A local-first, collaborative document editor (think Google Docs or Notion).
SyncPad is a high-performance, offline-first collaborative text editor built to demonstrate advanced distributed system concepts on the frontend. It allows multiple users to edit documents simultaneously with real-time updates, presence awareness (live cursors), and conflict-free synchronization.
Unlike traditional editors that rely on a central server for truth, SyncPad uses CRDTs (Conflict-free Replicated Data Types) to ensure that all peers eventually converge to the same state, regardless of network latency or offline intervals.
- Real-time Collaboration: Changes from other users appear instantly via WebSockets.
- Offline-First Architecture: Continue editing without an internet connection. Changes are persisted locally via
IndexedDBand automatically merged when online. - Multi-User Presence: See who else is in the document and where their cursor is located.
- Time-Travel Version History: Save named snapshots of the document and restore previous states instantly.
- Conflict-Free Merging: Powered by Y.js to handle complex concurrent edits without data loss.
This project implements senior-level engineering patterns:
| Category | Technology | Purpose |
|---|---|---|
| Frontend | Next.js 16 (App Router) | React framework for performance and modern structure. |
| Editor Engine | Tiptap (Headless) | Framework-agnostic rich text editor. |
| Distributed State | Y.js (CRDTs) | The magic behind decentralized conflict resolution. |
| Networking | Hocuspocus | Scalable WebSocket server designed for Y.js. |
| Persistence | IndexedDB (y-indexeddb) |
Local database for offline capability. |
| Styling | Tailwind CSS 4 | Utility-first styling with a custom design system. |
SyncPad utilizes a decentralized state model:
- State Vector: Each client maintains a local copy of the document state (Y.Doc).
- Propagation: Updates are broadcast as small binary "updates" efficiently over the wire.
- Convergence: The Hocuspocus server acts as a relay. Even if the server crashes, no data is lost because the "truth" lives on the clients (Local-First).
- Sync Protocol: On connection, clients exchange state vectors to determine missing updates.
- Node.js 18+
- pnpm (recommended)
# Install dependencies
pnpm installStart both the Next.js frontend and the WebSocket server with one command:
pnpm dev- Frontend: http://localhost:3000
- WebSocket Server:
ws://localhost:1234
- Open
http://localhost:3000in your browser. - Type a room name (e.g., "demo") and click Join.
- Open the same URL in a second window or different browser.
- Join the same room.
- Start typing! You should see changes and cursors sync in real-time.
- Disconnect one client (simulate offline) -> Type -> Reconnect -> Observe auto-merge.
MIT