Edit by hand, in code, or with an agent.
Every screen is live code. Change it on the canvas, in your code editor, or by asking an agent. The canvas updates as you go.
How it works
Three ways into the same screen.
Every screen is code, so there's one copy of it. A change on the canvas, in your editor or by an agent is the same change, and nobody rebuilds it from a description.
- 01
On the canvas.
Select a frame, double-click to step inside, and drag in components from your library. Props you change in the inspector are written to the code.
- 02
In your code editor.
The Mac app syncs every screen to a folder as a .jsx or .vue file. Save in your editor and the canvas re-renders.
- 03
With an agent.
Ask Statecraft's assistant for a change or an alternative, or point Claude Code or Cursor at the synced folder.
On the canvas
Controls you already know.
Frames, snapping, resizing and shortcuts work the way designers expect, on screens made of real components.
Select and step in. Click selects a frame. Double-click steps inside to select elements, and Escape steps back out.
Snap and resize. Edges and centres snap with guide lines. Resize with 8 handles; Shift keeps the ratio.
Text styles. Press T to add text. The styles come from your design system's type scale.
Layers and code. The Layers panel shows the element tree, and the Code panel shows the source of the selected screen.
With an agent
Try ideas without losing work.
The assistant edits the same screens you do, and keeps a version before every change.
Every turn is a version. Restore the screen from before any change the assistant made, from the Versions menu.
Alternatives side by side. Ask for options and they appear beside the live screen, outside the flow.
Your own agent. The synced folder explains its format to coding agents in AGENTS.md, so there's nothing to set up.
Credits or your own key. The assistant uses agent credits, or your own Anthropic key with no credits used.