Productivity / Real-Time

Boardly

A real-time collaborative whiteboard where teams sketch ideas, map architectures, and run workshops together, with conflict-free syncing across devices.

Full-Stack DeveloperBoardly Labs2024Team of 3
🎨

Overview

Boardly is a multiplayer whiteboard built for engineering and product teams. Multiple users draw, type, and arrange elements on an infinite canvas simultaneously. Changes sync in real time using CRDTs, so there are no conflicts even with high concurrency. The tool supports shapes, sticky notes, freehand drawing, connectors, and embedded images.

The Problem

Existing whiteboard tools (Miro, FigJam) are feature-rich but slow on large boards, expensive per seat, and lock data in proprietary formats. Engineering teams doing architecture reviews or sprint retrospectives need a whiteboard that handles 10+ concurrent users without lag, exports to standard formats, and doesn't cost $15/user/month.

Approach

CRDT-based state synchronization

Every element on the canvas is a CRDT document using Y.js. When two users move the same sticky note simultaneously, the CRDT merge algorithm resolves the conflict deterministically. No last-write-wins, no data loss. The sync layer runs over WebSocket with a lightweight server that relays and persists document updates.

Canvas rendering with WebGL fallback

The primary renderer uses Canvas 2D for drawing operations. For boards with 1,000+ elements, an automatic WebGL renderer takes over to maintain 60fps. The rendering engine batches draw calls and only repaints dirty regions, keeping CPU usage low even on complex boards.

Presence and cursor sharing

Each connected user's cursor position, selection, and active tool broadcast to all participants in real time. Cursor updates run on a separate high-frequency channel (30Hz) to stay smooth without flooding the document sync channel. User avatars follow cursors so you always know who's editing where.

Challenges

Undo/redo in a multiplayer environment

Undo in a single-player app reverts the last action. In multiplayer, undoing your action might conflict with changes others made on top of it. Implemented a per-user undo stack that only reverts the current user's operations, using CRDT tombstones to mark deleted elements without disrupting other users' state.

Performance with 1,000+ canvas elements

Large boards with hundreds of sticky notes and connectors can bog down rendering. Built a spatial index (quadtree) that only renders elements visible in the current viewport. Off-screen elements exist in the CRDT state but don't hit the render pipeline until they scroll into view.

Results

Boardly supports real-time collaboration for over 200 teams, with boards containing up to 5,000 elements without performance degradation.

200+

Active teams on the platform

5,000

Max elements per board at 60fps

<50ms

Sync latency between users

Tech Stack

Next.jsApp shell, authentication, and board management pages
TypeScriptType-safe canvas operations and CRDT document schema
Y.jsCRDT library for conflict-free real-time document syncing
WebSocketLow-latency bidirectional communication for live collaboration
Canvas APIHigh-performance 2D rendering for the whiteboard surface
RedisPresence channel and ephemeral cursor state broadcasting