Multiplayer

Multiplayer is live, collaborative editing on a shared canvas. When two or more members of a workspaceopen the same canvas, they see each other's cursors move in real time and watch nodes drag and resize as they happen. There is no "take turns" lock on a canvas — presence and live gestures are genuinely concurrent.

What you see when others are present

• Live cursors. Each present collaborator shows a colored cursor with their name, tracking their pointer across the canvas in real time.
• Presence roster. The set of people currently on the canvas, each with a stable color and name used for their cursor and any live edits.
• Ghost drag and resize.While someone is dragging or resizing nodes, the affected nodes move and resize live on your screen — a "ghost" of the in-flight gesture — instead of jumping only when they let go.

How live presence travels

Cursors and in-flight node geometry ride a dedicated WebSocket lane backed by a Cloudflare Durable Object: one room per canvas, keyed by the canvas id. This lane is for ephemeral, high-frequency signals — it is separate from the durable canvas data sync, which is where committed node and edge changes are persisted.

1. 1

   Get a short-lived ticket

   Before connecting, the client requests a signed ticket scoped to the canvas and the tab's session. The ticket is HMAC-signed and short-lived (about two minutes), so a leaked URL can't be replayed for long.

2. 2

   Open the room socket

   The client opens a WebSocket to the canvas's room with the ticket in the query string. The room verifies the ticket and the request origin before accepting the connection; an invalid ticket or disallowed origin is rejected.

3. 3

   Exchange presence

   On join, the room sends a hello with the current peers and broadcasts a peer-join to everyone else. From then on, cursor moves and node-geometry frames are relayed to the other peers; a peer-leave fires when someone disconnects.

4. 4

   Reconnect transparently

   If the socket drops, the client backs off and reconnects with a fresh ticket. Recent cursor samples are kept briefly during a blip and reconciled by the next hello, so a short network hiccup doesn't make peers vanish.

Ghost drag and resize

While you drag or resize, your client streams the in-flight geometry over the same socket as your cursor so collaborators see the motion live. The wire format is deliberately tiny — a drag sends position only ([id, x, y]), a resize sends the full box ([id, x, y, w, h]) — and coordinates are rounded to whole canvas pixels, because a moving ghost doesn't need sub-pixel fidelity.

• A group drag streams up to a fixed number of nodes per frame; if a gesture touches more than that, the extras simply commit on release with no live ghost. The cap degrades gracefully rather than dropping the whole update.
• Live geometry is ephemeral — it is relayed but never snapshotted. A late joiner doesn't need your in-flight gesture; they get the committed geometry through the normal data sync once you release.
• When the gesture ends, a clear message tells peers to drop the ghost and fall back to the committed value.

Related

• Workspaces — the container that decides who can be present on a canvas.
• Roles & Permissions — whether a present member can edit or only watch.
• Inviting Members — how to get collaborators onto the canvas in the first place.