Recipe

Collaborative Whiteboard

Build a real-time collaborative whiteboard with infinite canvas, drawing tools, sticky notes, and cursor presence — all synced across multiple users.

Infinite Canvas

Pan and zoom across a boundless drawing surface. Use transform matrices for smooth camera movement with wheel and gesture support.

Drawing Tools

Pen, shapes, text, and sticky notes. Each stroke is a vector path stored as an array of points, rendered on an HTML5 canvas with pressure sensitivity.

Cursor Presence

See who else is on the board in real time. Each collaborator gets a unique color cursor with their name, broadcast via WebSocket or CRDT sync.

Conflict-Free Sync

Use CRDTs or operational transforms to merge concurrent edits without conflicts. Every change is timestamped and attributed to its author.

Tech Stack

Canvas

HTML5 Canvas + OffscreenCanvas

Sync

Yjs + y-websocket

Persistence

IndexedDB + server snapshots

← Back to docs Read implementation →