Skip to content

Design tooling

Reference build

Real-time collaborative editing on 10,000-node component trees

A collaborative design platform with operational transform for conflict-free concurrent editing, and a virtualised renderer that keeps enterprise-scale component trees interactive.

<50msp99 operation broadcast

At a glance

Duration
43 weeks
Team size
4 people
Engagement
New build
Project type
Design system
Industry
B2B SaaS

The situation

The challenge

A component tree is a deeply nested mutable structure, and concurrent edits to one corrupt it unless conflicts are resolved properly. Separately, enterprise design systems with 10,000+ components were freezing browsers for three to five seconds.

What we did

Operational transform for correctness, virtualisation and a worker thread for the rendering cost.

The calls that mattered

  • Operational transform with vector clocks

    Concurrent edits serialised and conflicts detected explicitly, with an immutable reducer on the client so rollback is trivial rather than a special case.

  • Diffing moved off the main thread

    A virtualised tree renderer over react-window, with diff computation in a Web Worker. The freeze was never the tree size, it was doing the work where the paint happens.

What changed

p99 operation broadcast latency
<50msp99 operation broadcast latency
node trees without degradation
10K+node trees without degradation
data loss incidents
0data loss incidents
less time documenting components
60%less time documenting components
  • 0 — across 10 months in production

Sub-50ms operation broadcast at p99, 10,000-node trees staying interactive, and ten months in production without a data loss incident.

Services used

  • Operational transform engine with vector clocks
  • Virtualised tree renderer with off-thread diffing
  • Versioned component snapshots with CI integration

What we would do differently

Every project has one of these. Publishing it is the point — a case study with no regrets in it is marketing, not evidence.

OT and CRDTs look elegant on paper and the edge cases are brutal in practice. Starting with a narrow operation set and widening it as confidence grew was the only reason this shipped on time.

Services used

More work

Ready to start?

Start a project like thisWork