The visual builder

Layout

• Palette (left) — triggers and actions grouped by category.
• Canvas (centre) — drag nodes in and connect them via their edge handles.
• Inspector (right) — edit the selected node's fields and set branch labels on edges.
• Preview (bottom) — a live log; Run preview exercises the workflow end-to-end without touching a device.

Adding nodes

Drag from the palette onto the canvas. Each node gets an auto-generated id you can't change, but you can give it a descriptive label in the inspector — that label is what shows on the canvas and in run traces.

Connecting nodes

Drag from a node's output handle to another node's input handle. Ordinary edges carry no label; edges leaving an action.branch node are labelled true or false, set in the inspector.

Validation

The builder validates with the same Zod schema the API uses. An invalid node gets a red ring, with the specific message in the inspector, and Save stays disabled until validation passes.

Live preview

Click Run preview to execute the workflow through our in-browser TypeScript interpreter. The simulator adapter logs each action instead of performing it, producing a trace shaped exactly like a real run on a phone.

Versions

Every save writes a new workflow_version. The Versions dropdown loads an earlier one; saving from there appends rather than branching, so history stays linear.

Pushing to a device

Save runs validation, persists the version, moves the pointer, and sends an FCM push. End-to-end latency from Save to a phone being ready to run the new version is typically under 5 seconds.