Visualize actor system
"Visualize all running machines and their connections (even from actor to actor) in the visual editor"
"Event Drawer" feature to send events without clicking the state chart, making it easier for client to see the chart as a black box when trying to think from the perspective of a user.
https://www.youtube.com/watch?v=QroW-mL8IfM David: Any wish-list items that would make it even easier for them [client] to understand the flow? Me: Actually yeah. I had a hard time explaining how both CANCEL transitions trigger the same event because I had to actually click one of them to send the event. The subtlety that it was just firing the same event and tripping the inner CANCEL was hard to get them to see. I used the outer (higher level) CANCEL because that one was clickable in both states whereas the inner CANCEL is of course only clickable for the inner state. I was thinking it might have been nice to slide out some kind of “event drawer” from the toolbar and send events to the machine without having to click on the state chart itself. I think something like that would have greatly clarified the relationship between my action and the machine since I’d be clicking an event in more of an isolated “command palette” instead of a specific node on the state chart. Would make it easier to see the machine as a kind of black box from the external event sender’s perspective (user doing user things) The fact I was clicking the chart was really confusing them and I had to explain that I’m clicking the outer node to prove the event trips the inner node first regardless of where the event fired from. An event palette could be seen as a kind of mini user interface where the client can just think “user does X” and then sure enough there’s an event called exactly that, “user does X” right inside the event drawer. It would help encapsulate the idea that the user, knowing nothing of state machines, just does user things and the machine sorts itself out. For example, putting the client in front of the “event drawer” would be like putting them in the driver seat of a car. Even if they don’t fully understand the inner workings of the car it’s still cool to interact with the familiar API surface and watch the car work. Client could then take user actions at will without having to look closely at the state chart, and then watch the chart change as they do so. Might really ease them into looking at the chart in the first place because they get to play with it and then be like “Ooh! what’s happening over here as I do that?”.
Hitting state.new should notice about unsaved project
When reaching for https://state.new , it will currently redirect to the Stately Editor and load the current unsaved project instead of the default template. It would be interesting to have a toast message upon hitting the page to ask if you mean to work on this project instead of using the default template. The other way around, load default template ask for resuming work on unsaved project, could be interesting as well. The best UX between the two wins.
Improve the algorithm for autolayout so that it supports: Reasonable horizontal/vertical layouts Partial autolayouts https://github.com/statelyai/studio-issues/issues/110 https://github.com/statelyai/studio-issues/issues/82
Users should be able to collapse/expand state nodes, or entire levels, to get a simplified overview of the state machine at different depths without needing to see all of the states at once. https://discord.com/channels/795785288994652170/912333666456313907/979833691511590922 https://discord.com/channels/795785288994652170/912333666456313907/935255543977758740 https://github.com/statelyai/editor-feedback/issues/6 https://github.com/statelyai/studio-issues/issues/112
Remove: "Welcome to Stately!" sharing prompt
When I'm sharing a public state machine, I want the user to be able to view and simulate without being prompted or having the state chart being obstructed. A more subtle prompt (down the left or right hand corner) that doesn't obstruct the state chart would also be fine and/or allowing a user to dismiss it.
Allow resizing sidebar smaller
When I'm working on a state chart, I want to be able to resize the sidebar down to a small size so it does not obstruct the state chart. It is currently (5%) of the viewport width, which on a larger screen is a minimum of 511px, whereas on a mac laptop it is 345px.
The editor should provide a code editor (CodeMirror or maybe Monaco) for editing implementation details. https://discord.com/channels/795785288994652170/912333666456313907/936648793712099379 https://discord.com/channels/795785288994652170/912333666456313907/935841309900558366