Walk a flow

Link the frames

A frame walks to another by its name, which is its path under frames/. Ask your agent to link them, or write it yourself: data-go on any element walks there on click, and ui.go walks from code.

import { ui } from "spool";

<button data-go="receipt">Pay</button>
<button onClick={() => ui.go("menu")}>Add more</button>

Read the arrows

The canvas draws an arrow for every literal walk in a frame's folder, from the element that causes it. An arrow is solid when the walk always happens and faint when it sits inside a condition. spool flows prints the same graph, and names any destination it could not read.

Walk it on the canvas

Click into menu and press Checkout. The walk lands on cart, live, with the session it carried. A walk to a frame on another page docks as a tag naming it, and pressing the tag goes there.

Play the whole flow

Press Play on a frame's name, or P with it selected, and the player opens in a tab of its own. It plays the journey as one document, at the frame's own width, and each walk is a crossfade unless shared/transitions.css says otherwise. Every load is a fresh session, so reload to start over.

Carry state across

ui.state is what the app knows, shared by every frame in the session: a cart filled on menu is still full on cart. On the canvas every frame on a page stands in one session, so two frames side by side are two clients of one app. Named seeds for that state are scenarios.

The details are in The design/ folder, and your agent reads them all with spool skill flows.