Skip to the demos
All labs
02Lab

Live sync

Open this page twice. Move something in one window and it moves in the other — and in every other visitor's window too.

Cloudflare Durable Object room, WebSocket delta updates into Redux Toolkit. Chaos panel for reconnect and state repair.

room · mainidle
here now
0

Open this page in a second window — the boards stay in step.

waiting for the room…

board version
deltas in0
moves out0
frames lost0
repairs0
reconnects0
chaosbreak it on purpose
network latency
packet loss
connection

Turn on packet loss and drag a node in another window. This client will miss a version, notice the gap and ask the room to repair it — watch repairs climb.

wire
  • no traffic yet
Proves this line on the resume
Built scalable real-time state synchronization using Redux Toolkit and WebSocket delta updates, supporting 4,000+ concurrent live-sync connections across multi-tenant environments.
Dell Technologies — Inventory Management & Infrastructure Platform

How it works

Everyone on this page is connected to the same Durable Object — a single instance, addressed by room name, that owns the board. Concurrent drags from different visitors serialise through it instead of racing, which is why the board never ends up in two different states.

Sockets are accepted through the hibernation API, so an idle room is evicted from memory and costs nothing until the next message wakes it with its connections intact.

Moves are applied locally the instant you drag, then reconciled when the server echoes them back. What travels on the wire is a delta — one node, two coordinates, a version — not the board.

Versions are the whole point. Every mutation increments one, so a client that sees v9 when it expected v7 knows it has drifted and asks to be repaired. Turn on packet loss and you can watch that happen: the room replays the ops that were missed, or re-seeds the whole board if the gap has run off the end of its log.