Reference

Show every state of a feature

A static mockup shows one screen. A real feature has every variation a user might land on — when the network is slow, when there's nothing to show, when something failed, when it's a user's first time. In Statecraft each one is a frame on the canvas, side by side.

Why this matters

The screens that get a feature shipped are rarely the happy-path ones. The reviewer asking about your design wants to see what happens when the network is slow, when the form is empty, when the request fails. Static mockups dodge those questions — Statecraft answers them by making each variation a real, live-rendering frame.

canvas-five-states.png

Every state shares the same project, the same design system, the same provider stack. They differ only in the JSX they render — and because they all sit on one horizontal canvas, you (and your reviewer) can scan the whole feature at a glance.

Add them as separate frames

  1. Build the idle state first. This is the canonical version, the one your design system was built for.
  2. In the sidebar, click + Add state to duplicate it. Statecraft seeds the new state's JSX from the one you had selected, so you can edit incrementally instead of building each from scratch.
  3. Rename the new state (loading, error, etc.) and tweak its JSX — disable a button, swap text for a spinner, replace the form with an error banner.
  4. Repeat for each variation.

The canvas updates live as you type. There is no save button; every state stays in sync as you move between them.

Concrete example: a sign-up form

Idle      <Form><Input placeholder="Email" /><Button>Sign up</Button></Form>
Loading   <Form><Input placeholder="Email" disabled /><Button disabled><Spinner /> Signing up</Button></Form>
Error     <Form><Alert>Email already in use</Alert><Input placeholder="Email" /><Button>Sign up</Button></Form>
Success   <Card>Check your inbox to confirm</Card>

Four states, one feature. Each is a real, click-through frame — not a description of what the screen "would" look like. A reviewer can see all four side-by-side and know the feature has been thought through.

Connect them with transitions

Once the states exist as frames, wire them together so the prototype is clickable. Prototype how you like covers this in detail; the short version for a sign-up form:

  • idle ── submit ──▶ loading
  • loading ── resolved ──▶ success
  • loading ── rejected ──▶ error
  • error ── retry ──▶ loading

Click the Play button in the toolbar to open the prototype in its own window and click through the loop. Every variation is real, every transition fires, every component renders against the design system.

What's next

With the states in place, share the prototype for feedback — save a snapshot and invite your reviewer to comment on specific elements. To make the visual polish match production, bring on your component library so each frame uses the components your engineers will ship.