Stately Editor Public Beta

A couple of questions:

1. Which parts are open source? Will it require a commercial license?

2. I once worked on an already-existing credit card chargebacks system that was horrifically complex, with all kinds of variations and rules and states that play out over weeks or even months. The logic was scattered all around a Rails app, sometimes in clear chunks of business logic, but sometimes something like an `expired?` accessor on a chargeback variant would know the expiry period for that type of chargeback, etc.

I toyed with the idea of trying to pull all the logic out into some kind of non-code representation. Possibly a state machine diagram, possibly a giant spreadsheet (because with real-world payment processing, you can get just about any response when you're in any state, whether it seems valid or not, and you have to choose to do _something_!). Possibly a state machine diagram for the normal path but with a spreadsheet representation for the full cross-product of weird state transitions. Alas (or thankfully), I moved to a different project before I could undertake anything ambitious.

Would Stately let me do that? Move the knowledge of a hideously complex real-world, extended process that had been painstakingly gathered for years and encoded in logic scattered around an application, and let non-programmer, business-level people use that representation to understand and even tweak parameters of the process?

Nice work! Anything that helps visualise state I'm happy to see.

Reading the linked article I'm unclear: does Stately generate output that we run with XState? Or is it a SaaS where we design and run the state machine (a bit like Camunda provides for running BPMN diagrams)?

If not already present, a visual runner would be awesome - like https://github.com/bpmn-io/bpmn-js-token-simulation allows, to explore the state.

Edit: looking at the Visualizer I think you've already got a visual runner - I click my way through and see/choose the options at each stage. Cool!

It's the first public beta release, after a huge amount of open source work. Hopefully they'll support Safari soon.

If you're a VS Code user, it's also available as a VS Code plugin, which seems more advanced and useful than the browser app is currently anyway. It has bi-directional editing, which looks very useful.

> I'm not going to use a special web browser

But Safari is a "special" browser.

Not seeing an issue here. Safari often lags behind published standards, and is nearly impossible to test for (due to Apple being developer hostile).

XState is a great state machine library for JavaScript/TypeScript and we're happily using it in production.

For us the visual editor is a great sketching/design tool between engineers and product managers.

No, state machines aren't state factories.

State factories are the generators for state pattern.

State machines are constraint systems which govern which states are allowed to transition to one another.

The use case for a visual editor is that as state machines get over a certain complexity (for me, usually around 15 states,) they start getting hard to reason about. Being able to see them helps.

Consider the case of a state machine representing some object's flow through a manufacturing process. There are three lines: one for main process, one for defect repair, and one for pull testing.

Each line has a set of steps going in both directions: one for progress and the other for Toyota Method style step-audits, going in reverse.

It turns out you forgot one of the steps in the defect repair process, near the middle.

If you're looking at this in code, it's down to reading all the text, looking for exceptions, differences, really working it over

If you're looking at this on a diagram, it's two stripes where it should be three, and there's these two half-stripes that shouldn't be there

From the post (emphasis theirs):

> Our mission is to make app logic accessible to the entire team, including developers, designers, and stakeholders. Using state machines and statecharts as a common visual language, the software development cycle becomes more collaborative, eliminating handoff and tightening the feedback loop.

For me the more interesting benefit is how it might help an individual developer with designing/coding complex machines in the first place. Many devs value instant visual confirmation after each tiny code change, in a tight feedback loop that leads to a smooth, creative flow state. The GUI side of front-end dev is usually done this way in frameworks like Next.js. Using this new Stately editor via its VS Code plugin might create similar conditions when working on core application logic.