What is the relationship between Stately.ai and XState?

Updated

Stately.ai and XState are closely connected but not the same thing. Stately.ai is a visual platform for designing, simulating, and generating logic as diagrams and code. XState is the open-source JavaScript/TypeScript library that Stately uses as its runtime for executing those diagrams. You can use Stately without XState in some cases, and you can use XState without Stately — there is no lock-in.

The core relationship

Stately describes XState as "a best-in-class open source library for orchestrating and managing state in JavaScript and TypeScript apps." When you build an executable diagram in Stately, XState is what runs it. This means:

  • Stately = the visual layer. Drag-and-drop editor, simulation, AI-assisted generation, documentation, test generation, and code export.
  • XState = the execution layer. The library that interprets state machines, statecharts, and the actor model at runtime.

The two are designed to work bidirectionally: changes in code update the visualization, and changes in the visualization update the code.

Do you have to use XState with Stately?

No. Stately explicitly states "No lock-in." Two paths exist:

Scenario Do you need XState? What Stately does
Building new logic in Stately and running it Yes (as the runtime) Generates XState-compatible code in JavaScript or TypeScript
Visualizing existing Redux, Zustand, or other code No Automatically visualizes that code to give you Stately's benefits
Using Stately purely for diagramming and documentation No Diagrams, simulation, and sharing work without executing XState

So XState is the default runtime for executable diagrams, but Stately can still add value to codebases that use other state management libraries.

Where XState runs

Because XState is a JavaScript/TypeScript library, it runs anywhere JavaScript runs — frontend, backend, or elsewhere. Stately lists integrations for React, Vue, Svelte, and other frameworks. XState uses event-driven programming, state machines, statecharts, and the actor model to handle complex logic in predictable, robust, and visual ways.

Practical implications

  • If you adopt Stately for new projects: you'll typically be writing XState machines, whether or not you touch the code directly. Stately can generate React apps from diagrams and export JavaScript or TypeScript.
  • If you already use Redux or Zustand: you can visualize that code in Stately without migrating to XState.
  • If you want to leave: since XState is open source and there's no lock-in, the generated code and the library remain usable independently of Stately.
  • Tooling: an IDE extension brings Stately into VS Code, and you can connect GitHub to sync Stately with your codebase.

In short: XState is the engine Stately uses to make diagrams executable, but Stately is broader than XState — it also visualizes other libraries and supports design, simulation, and documentation workflows that don't require XState at all.