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.
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:
{ devTools: true }
, with the ability to switch between machines
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):
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:
@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.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 😴☕️