Statecraft
A design tool that reads a product's real user journeys straight from the live code, so the map of how it works stops losing value the minute you draw it. Edit a flow in the browser, your editor, or with an AI, and the real components update. Research, brand, full-stack app and launch, built solo.
Depreciating images
Every team keeps a picture of how its product is meant to work: how you sign up, what checkout does, what happens when a card gets declined. If you’re really lucky there’s a figma board somewhere that has 1:1 recreations of these things, built a component library that perfectly replicates production components, threaded together to catch all the edge cases. If you’re really lucky you work at IBM or AWS, and you have a 20-person design systems team who keeps on top of all this stuff for you.
You are almost definitely not that lucky. Almost nobody is.
Every screen you draw in Figma (or Penpot, or Subflow, or Pencil, or whatever else) starts depreciating the second you create it. The components update around you, PMs change the flows, engineers change the underlying data-structures, content designers change the copy, UX designers change the IA or layouts.
Statecraft syncs a canvas directly to your frontend, so you can draw like you do in other design tools (or get an agent to do it for you) but with the same components your users see. Instead of relying on half-finished PRDs or jira tickets you can import journeys directly from your app and have them recreated correctly. And instead of manually updating flows when you want to test component updates, Statecraft lets you preview them instantly and does the syncing for you when the frontend updates.
Lessons learned
Statecraft was borne of something I’d made for myself, a sketching canvas that pulled in components from the React project I was working on and let me use their components. Fine for me.
The first version imported the entire app the user was working on. Every screen, every state, all running in their own little iframes. Fine for me - my little homemade DAW was only about 60 states, so seeing them all and getting their connections was pretty easy.
Obviously this fell apart the second something bigger than that was imported. I did a demo for a media company in Italy and the importer finally spat out 1300 screens that immediately crashed my browser tab.
Once I’d found a way to get it loaded it was absolutely unreadable. The transitions tangled, near-identical states were hard to understand; and little dev-only sites for testing piled up in a corner neither use nor ornament.
Big change: one journey per project. A more manageable amount of rendering, cleaner transitions, more understandable state changes.
Onboarding was also full of lessons. My first release would ask you, a stranger, for your company’s GitHub repo about 12 seconds after you arrived. I replaced it with a playground of around thirty open-source design systems you can poke at straight away. Activation went from nobody doing basically anything to people genuinely creating projects.
Building real things
Statecraft renders your live React or Vue components, so what you poke at on the canvas is exactly what you’d ship, down to the tokens and variants the design system actually carries.
Select an element and its real props open in a panel; drop into the code and change it directly; wiring a transition is just saying what a thing does when it’s clicked, so a static layout becomes a flow you can click through.
Edit in the browser, in your own editor through a synced folder, or by handing it to whatever coding agent you already use (Claude Code, Cursor, take your pick), and the canvas catches up within seconds. It’s multiplayer too: live cursors, comments pinned to a single button, and snapshots you can share as a link with no login.
One pair of hands
Every layer of this is mine: the research that found the problem, the brand and marketing site, the canvas and its editing model, real-time collaboration on a sync engine, a Rust daemon and a menu-bar app that watch a local repo, plus authentication, billing, email and analytics.
Including the bit I hate. Outreach, the LinkedIn messages and pestering people. Despicable but apparently unavoidable. My competitors all raised like $40m last year and I don’t have any pals in Silicon Valley or hundreds of millions of dollars to spend on ads, so this seems like the move.
Where it stands now
A couple of design partnerships, some users. I hate “running a business”.
Tools: React, Vue, TypeScript, Convex, Yjs, Rust, Tauri, the Anthropic API, Figma, Vercel and Fly.io.