XState is a JavaScript framework by Stately for managing state machines and statecharts and includes the ability to treat them as actors.

Example XState Project: Gas Pump

The gas pump example project uses XState to implement a basic gas pump as if it were an integration of three separate applications, each using a statechart unknown to the other applications, but potentially dependent on them. This was important to prove conceptually for potential use in a multi-team enterprise setting.

This was accomplished by using two separate registries:

  1. A Statechart Registry for each application's statecharts
  2. A UI Component Registry to map UI Components (plain HTML & JS - no framework) to available actions

The Statechart Registry is used to assemble a "Super Statechart" to manage shared context and cross-statechart communication. This was easily achieved by virtue of each application's statechart being subjugated to the Super Statechart, which gave each app's statechart a shared context and enabled communication via the send action.

It was also necessary to merge the configuration options, which also provided a rudimentary opportunity to detect conflicts. For example, if two independent statecharts defined a hasCredit guard, the conflict needed to be detected to fail the formation of the Super Statechart.

XState Resources

XState Tutorials and Presentations

Broader Topics Related to XState (JavaScript Library)

Actor Model

A model where an actor is the fundamental unit of computation including processing, storage, and communication


The language of the web until WASM takes over

State Machines

Abstract representations of system state at a given point in time


A visual formalism for complex systems

XState (JavaScript Library) Knowledge Graph