Collaborative Whiteboard and Diagram Editor

An editable browser canvas with drawing tools, shared scenes and client-side encryption.

We built an embeddable canvas for diagrams and shared sketching. People drop in shapes, arrows and text. They add images and freehand strokes too, then save the result as a scene they can edit again later.

That editability carries into the exports. A PNG or SVG file can hold the scene data, so a drawing reopens as elements for more work.

The challenge

Collaboration makes undo harder to reason about. One person may move a shape while another changes the scene around it. Undoing the first person's last action should not simply restore an old snapshot and wipe out the second person's work.

Cursor movement and selection controls change far more often than the drawing itself. The renderer therefore had to handle those frequent updates on a separate track of its own.

What we built

The canvas supports grouping and frames. Alignment, snapping and configurable arrow bindings help people place elements precisely. Shape libraries, import tools and a command palette help people build and move around a drawing. Browser storage keeps local work between sessions.

A collaboration relay passes scene updates and cursor positions, and a person can follow someone else's view. The editor resynchronises on a schedule to recover missed messages, and the host application supplies the relay and shared storage.

Technical approach

The real-time collaborative editing architecture starts with separate canvas layers. One layer holds the scene, another holds the editing controls, and a third holds the action in progress. Cached shape descriptions and offscreen elements let the renderer reuse earlier work instead of redrawing the whole scene on each pointer move.

Every element carries a version and a nonce for reconciliation. A newer local version can be kept, and so can an edit still in progress; when two versions match, the nonce decides which copy stays. History stores deltas, and remote updates stay out of the local undo stack. Undo applies a local change to the current scene, while simultaneous text edits resolve at the element level rather than per character.

Before anything is shared, the browser encrypts the content with AES-GCM and a fresh initialization vector. The key rides in the fragment of the sharing link, which stays outside the normal HTTP request. Anyone who holds the full link can open the scene under this model, and account-based room permissions or link revocation would need extra controls.

Project success

A drawing can move between local editing, collaboration and export. It does not collapse into a flat image that has to be rebuilt, and local undo still works against the current shared scene. Scenes are encrypted in the browser before they travel. The host keeps responsibility for the collaboration services, and for any access rules beyond simply holding the sharing link.

Technology stack

Interface

React, TypeScript, Jotai

Drawing

Canvas, Rough.js, perfect-freehand

Local persistence

IndexedDB, localStorage

Collaboration transport

Socket.IO

Shared storage integration

Firebase Firestore and Storage

Encryption

Web Crypto, AES-GCM