Rocket Flow Pro

Rocket is currently in alpha – available with Datastar Pro.

A Datastar powered version of React Flow, in which the server owns the graph state while Rocket provides a canvas for manipulating nodes and edges.

Demo

Pan and zoom on the graph. When you move a node, the optimistic position is shown with a faded opacity while the server remains the source of truth. When the backend broadcasts the snapped coordinates, the pending highlight clears. The blue node demonstrates supplying custom SVG content directly inside the light DOM, and the edges trace automatically between node IDs. Click an edge to select it, then press Delete or Backspace to request removal.

Explanation #

Each client subscribes to an updates endpoint from which the server streams the authoritative graph. Dragging a node issues a POST request to a nodes endpoint. The backend snaps the coordinates to the 32x32 pixel grid, updates shared state, and emits the next snapshot. That snapshot carries a server-update-time prop (decoded with the date codec), so every tab knows when the backend has reconciled the move and can automatically clear the pending styling.

This keeps the flow editor optimistic without turning it into a client-owned graph like React Flow. Rocket simply provides the interactive layer while Go continues to own the topology, making it easy to broadcast changes across tabs and keep the visuals honest.