Get set up
Statecraft renders your real components, so the one thing worth doing before anything else is pointing it at the library your team already ships. That takes a few minutes and an agent does most of it. Everything after that you can learn by clicking.
Open Statecraft
Download the Mac app, or open it in your browser. They are the same editor. The Mac app adds a sync folder — a local directory holding your states as real .jsx files, so Cursor, Claude Code and your own editor can work on them alongside you. See CLI & desktop app.
Bring your design system in
The first time you sign in, Statecraft asks one thing: add a design system, or choose one of the existing ones. Nothing else — you can name workspaces, invite people and set up a sync folder later.
Point it at the repository your components live in. Public repos work as-is; for private ones, install the Statecraft GitHub App when it offers. Not on GitHub? Connect GitLab, Gitea, Bitbucket or your own server with an access token — on GitLab, a fine-grained token with just Code: Download on the projects you want is enough to import from them. On the Mac app you can point at a folder instead and connect nothing at all. The whole thing also runs from the terminal — statecraft design-system import start, see the CLI page.
If you'd rather see Statecraft working before you connect anything, pick one of thirty open-source libraries instead. That takes seconds, and you can import your own later — projects aren't locked to the design system they were born with.
An agent then reads the repo and proposes a configuration: the framework, the bundle entry point, the install setup, whichever Tailwind or CSS-in-JS pipeline is in play, and a curated list of components. It builds the bundle and mounts each component to check it actually renders, so what you're reviewing has already been proven to work.
Read the proposal and correct it in plain English — "the package lives in packages/ui", "drop the Skeleton component", "add the dark theme". Each correction triggers a fresh build, so you find out immediately whether it worked. When it looks right, hit Publish and the design system is live for everyone in the workspace.
Reading a repository takes about ten minutes, so you don't have to sit with it. Close the tab and we'll email you when it needs you — and if you'd rather not get those, turn them off under Account → Notifications.
Make something with it
Hit New project. The editor opens on a blank canvas bound to your design system, and the component palette is already full of your real components.
From here, click around. Drag components onto the canvas, double-click into a frame to edit its elements, wire a button to another frame to make it clickable, and hit Play to walk through the result. Or skip the canvas entirely and ask the AI panel to build the screens for you.
Changing the design system later. A project isn't locked to the one it was created with, but there's no switcher in the editor yet — use statecraft project update <ws>/<project> --design-system <slug>, or edit project.json in the sync folder. Your states are JSX rather than a rendering of a particular library, so the switch is a re-render: anything the new system doesn't have shows up as an error on the canvas, which is the honest place to find out.
Where to go next
The rest of these docs cover the parts you can't discover by clicking:
- Design systems — the five ways a library can load, and what to do when the import agent gets it wrong.
- statecraft.yaml — the full manifest schema.
- CLI & desktop app — the sync folder, the command-line verbs, and working alongside a coding agent.
- Publish & PR previews — republish the design system from CI, and put a visual preview on every pull request.
Anything missing, mail support@statecraftapp.com.