Play mode

Play mode is the click-through prototype view. Every state renders full-window with no editor chrome; clicking an element with a data-transition attribute navigates to the target state. Play is served from the play. subdomain as a public, unauthenticated viewer — the URL is shareable as-is.

Opening Play mode

Click the Play button in the editor toolbar — it opens a popup window on play.<domain> at the current state's preset size. The Play URL is shareable as-is; anyone with the link can open it without signing in.

Play URLs take the form play.<domain>/p/<shareSlug>/s/<stateId>. The share slug is a random opaque identifier — it's distinct from the project's database id (which shows up in the editor URL bar) so a screenshot of the editor URL can't be repurposed into a Play URL. Anyone with the Play URL can view — no workspace login required, and the slug is hard to guess, but the content is effectively public, so don't share a Play link for anything confidential. Navigating inside Play updates the state segment so that refreshing or deep-linking lands on the same screen.

What's visible

Play mode renders the state's JSX inside a preview iframe sized to the state's frame preset. Nothing else is shown — none of the editor chrome (no toolbar, panels, or dock), no element outlines, no comment pins. The theme (light or dark) inherits whatever the editor was set to when Play was launched; there is no separate theme control inside Play mode.

How transitions fire

Click an element that has a transition wired to it and Play mode navigates to the target state. The click bubbles up through the DOM until it finds an element with a data-transition attribute, so it doesn't matter whether you click directly on the button or on something nested inside it.

A click on a non-transition element does nothing — the prototype reacts exactly as the real UI would: only intentionally-wired elements are interactive.

Popup window sizing

When Play is opened from the editor, the popup is sized to match the current state's width and height preset. This makes Play a better preview for device-specific states than scaling everything to a single window.

Exiting Play mode

Close the popup window or navigate away in the browser. Play mode does not define any keyboard shortcut for closing; the browser's normal close and navigation controls apply.

What Play mode does not do

• No form validation or side effects — inputs accept text, but no data is submitted anywhere. Transitions are the only response to interaction.
• No stateful re-renders — every state is a fresh render of its JSX. React state inside components resets on every transition.
• No animation between states — navigation is a hard swap.

These limits match the model: Statecraft describes a feature's screens and the events that connect them, not its runtime behaviour.