🚀 The Future of Visualizing State Machines

Over quarantine, I’ve been slowly working on something that I’ve wanted to exist for a long time.

There are so many tools that help us inspect logs, events, and even state in our applications, and many of us rely on these tools to put the pieces together and make sense of what’s going on in our application. But that’s not the whole picture!

What I feel is important is understanding what can happen in any given state. We should be able to visualize the logic and behavior of our apps as they’re running.

Launching Statecharts.io

And that’s why I started statecharts.io, which is going to be the new home of many visual state machine & statechart tools, starting with a visual inspector for XState.

The inspector is a small tool that’s installed from @xstate/inspect (documentation pending 📘) and integrated with one line of code in your app:

import { inspect } from '@xstate/inspect';

// You can add an <iframe data-xstate> if you want
inspect({ iframe: false });

The current features are:

• Visualizing all machines interpreted with { devTools: true }, with the ability to switch between machines
• Showing the full state of each machine
• A log of all events with event data, and the ability to send custom events
• That’s right; you can control running machines from the inspector
• Live sequence diagrams showing how “actors” communicate with each other:

Still a Work-In-Progress

This is actually a small part of what I’ve been working on during quarantine, but I’m excited to start sharing it with you. There is a need for even more tooling to make the ideas of software modeling with state machines, statecharts, the actor model, event-driven architectures, domain-driven design, etc. more easily accessible to developers and more mainstream, for both technical and non-technical people alike.

Here are some of the in-progress things I’ve been working on (which are only shared in this newsletter):

• Visual statechart builder: a drag-and-drop interface for quickly building statecharts, and exporting them to code or importing them from existing code
• Statechart library: a registry of community-created statecharts that can be shared and used anywhere
• Statechart analysis: automatically detect logic errors or potential optimizations in statecharts, and eventually compare with similar, existing statecharts (this might require some machine-learning work…)
• Model-based testing tools: integrate model-based tests with existing testing libraries (e.g., Cypress) and surface useful analytics visually in real-time as the tests run
• Analytics, versioning, and simulation: like the inspector, but for production apps, with a strong focus on privacy. Understand user flows and detect bottlenecks, even before they happen. Basically time-travel debugging in the future, sort of like Minority Report.

Updates and Feedback

First, I want to thank you all for your support, and let you know that this is the first of many things to come. XState + tools are “passion projects” that I and other awesome contributors have been working on for 3+ years now, with no signs of slowing down. This is just the tip of the iceberg of what’s planned, and we’re all really excited about the future of state management tooling, not just for JavaScript/TypeScript, but for all languages.

Some upcoming things:

• Now that the initial inspector has been released, I’ll be focusing more on XState version 5, which will have better SCXML compatibility (which requires a major version change), smaller size, faster performance, and some nice new features.
• If you’re not aware, there is an @xstate/graph package that provides graph-based utilities for XState machines. We will be adding more utilities to enable machines to be visualized anywhere, including GraphViz, PlantUML, ELK, etc.
• Matt Pocock and Mateusz Burzyński have been working on XState CodeGen, which will significantly improve the TypeScript experience (read: make it absolutely ✨ magical ✨), providing features that aren’t possible with TypeScript alone, and making the developer experience much better with TS + XState.
• More examples! I had a choice this quarantine to work on the inspector or work on more examples with XState in real-world apps. Now I can focus on examples. But for now, I strongly encourage you to check out the Cypress Real-World App, which is about as real-world as it gets with XState.

Thank you in advance for kicking the tires on the new inspector. If you have any feature requests or issues, please post it in the discussion here.

Now I’m going to catch up on sleep 😴☕️