techdiagrams.net
← All templates

Multiplayer canvas (Figma-style)

Live design-tool multiplayer: delta-CRDT maps per file, a session actor as ordering authority, 60Hz cursor presence, and a compacted changelog.

Open in editor — free, no login Download JSON
PER-FILE AUTHORITY + DURABILITYdeltas + cursor @60Hzsubscribemux by filebroadcast merged deltas + presenceappend → compactfetch assetsDesigner Adrags rect #7Designer Brecolors rect #7Viewerread-only · cursors visibleConnection gatewaysticky by file idFile session (actor)delta-CRDT map · authorityChangelogdeltas · compactedAsset CDNimages · fonts · exportswhy both edits win: A moved rect #7, B recolored it —different properties of the same object are independentCRDT registers. True conflict (both move it) = LWW perproperty, which is fine for geometry.

What this design does

Figma's trick is treating the file as a big CRDT map of objects — each property update is a tiny delta that merges cleanly, so fifty cursors can edit one canvas without locks. A per-file session actor orders and rebroadcasts deltas, the changelog persists them with aggressive compaction (only the latest value per property matters), and presence traffic stays ephemeral. The same shape runs our own live collab on techdiagrams.net.

The patterns it composes

Import it, attach your own numbers, and verify the design against failures — or read the engineering notes.