Statecraft docs
Statecraft is a design tool that runs on the same components your engineers will ship. Map a journey out of your repo, prototype against real components, share for feedback, and keep everything in sync as the codebase moves underneath you.
Getting started
Six journeys that mirror what Statecraft can do, ordered so each one builds on the last. You don't have to read them in order — jump to whichever one matches what you're trying to do.
Import your design system
Point Statecraft at your frontend repo and we'll pull in the real components, styling pipeline, and provider stack — Tailwind, CSS-in-JS, npm, or local.
Map an existing journey
Tell our agent to visualise a flow that already lives in your codebase — checkout, sign-up, settings — and watch it materialise on the canvas.
Prototype how you like
Drag-and-drop visually, edit source in your IDE, or prompt an AI agent. All three drive the same canvas.
Share with users and colleagues
Public snapshot links for stakeholders and user testing; live cursors and inline comments for teammates inside the workspace.
Visualise changes on every PR
Wire Statecraft into CI and every PR that touches a mapped journey gets a visual preview — no manual click-throughs, no regression-test wait.
Keep components in sync
Publish your design system from CI so component changes propagate to every prototype the moment engineers ship them.
Reference
Once you're past the journey pages, the reference section covers the model in detail — Core concepts for the vocabulary, States & transitions, Show every state of a feature, Snapshots & version history, Comments & feedback, Play mode, YAML schema reference, and Build alongside an AI agent for the CLI + sync-folder setup.
Working in the canvas itself — editing states, selecting & arranging elements, properties & tokens, devices, themes & zoom, and keyboard shortcuts — each has its own page in The canvas section.
Email support@statecraftapp.com if something you need isn't covered.