Redesigning Statefully

Two days after the first version, I redesigned everything. I'd started from Sketch Systems' base template, and realized it's not actually how I want the app to work (0:02). They built a great product, but I changed it up. Now the spec is in a sidebar and the state chart fills the rest, and the prototype controls, which are totally optional, have their own tab. I'll work on those later, I just wanted them out of the way (0:25).

Instead of a code editor with lines and all that, the sidebar feels much more like Notion. You can drag and drop, and every new line gives you a hint (0:44). Indenting a line makes substates, and with Command I can move things up the tree or delete everything up it, though that last change wasn't live yet because my PR hadn't merged (1:23).

I added autosave, hints that tell you a bit more whenever you start a new line (1:33), and comments, which don't show up on the state chart. Maybe they will one day, on hover. I got rid of the collapse state, because that was weird, and added suggestions as you type (2:08). It's feeling more like the product I've been wanting for a while.

When I posted it on X I wrote:

Decided to redesign the whole thing, and make it my own vs just copying the way that sketch systems was.

• New UI, editing experience, got rid of the 4 panels, simplified the layout, moved things around, added autosave, hints and tricks, and lots of other things.

Even added stripe for some payment testing but that's not working yet and I ran out of credits

All made in v0 - https://v0-statefully.vercel.app/