# Redesigning Statefully

Tom Johnson · 2026-05-23

[Tomjohn Design](https://x.com/tomjohndesign/status/2058019666526658561)

Two days after [the first version](https://www.tomjohn.design/content/statefully-in-v0), 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)](#t=2). 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)](#t=25).

![Statefully redesigned, with the spec in a sidebar beside the state chart, captioned as I say: “I totally redesigned everything because I started from Sketch Systems' base template and I realized it's not actually how I want the app to work.”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/statefully-redesign/redesigned-everything-68eUzM8UJj01EhCCxhZQheCqzsEOoz.mp4 "Clip")

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)](#t=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)](#t=83).

![Editing the spec in Statefully's sidebar, captioned as I say: “but then you've got this right here, and instead of being a code editor and being like lines and all that kind of stuff, it feels much more like Notion. You can drag and drop,”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/statefully-redesign/like-notion-N343HjNjqJB114wHnrXPMcHVa7Grta.mp4 "Clip")

I added autosave, hints that tell you a bit more whenever you start a new line [(1:33)](#t=93), 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)](#t=128). It's feeling more like the product I've been wanting for a while.

![A comment added to the spec in Statefully's sidebar, captioned as I say: “I also get rid of the collapse state, because that was weird. And it's kind of feeling more like the product that I've been wanting for a while.”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/statefully-redesign/wanting-for-a-while-4l21yFHpqUKrdufqZCarxvcjyMecm9.mp4 "Clip")

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/