Stately & XState docs
Learn XState, state machines, statecharts, and actors. Find tutorials, API guides, and documentation for the Stately visual editor.
Welcome to the Stately and XState docs
Stately.ai is a visual software modeling platform for modeling your app & business logic as state machines/statecharts and actors, and scales to any level of complexity.
XState is an open source library for modeling and running application logic in JavaScript and TypeScript.
XState v6 is in beta. Its APIs and behavior may change before the stable release. Read the v6 beta docs or the stable v5 docs.
Quick start
Install XState:
npm install xstate@betaCreate a state machine:
import { createMachine, createActor } from 'xstate';
const toggleMachine = createMachine({
id: 'toggle',
initial: 'inactive',
states: {
inactive: { on: { toggle: { target: 'active' } } },
active: { on: { toggle: { target: 'inactive' } } },
},
});
const toggleActor = createActor(toggleMachine);
toggleActor.start();
toggleActor.send({ type: 'toggle' });
console.log(toggleActor.getSnapshot().value); // 'active'
toggleActor.send({ type: 'toggle' });
console.log(toggleActor.getSnapshot().value); // 'inactive'Read the v6 beta quick start guide to learn more.
Get started with XState v6
Create and run your first XState machine.
Stately Studio overview
Find out more about Stately Studio's visual editor and collaborating with your team using Stately Studio's premium features.
Learn state machine basics
Follow states, events, and transitions through visual examples.
What are statecharts?
Read state chart examples, learn the notation, and explore nested and parallel states.
Learn XState
Get started with our JavaScript and TypeScript library for state machines and statecharts.
Stately Studio or XState?
Stately Studio and XState are designed to be used together. Use Stately Studio's visual editor to collaboratively model your app logic and use XState to integrate that logic into your codebase.
You can also use XState in your codebase without Stately Studio, and you're welcome to use Stately Studio if you're not yet familiar with XState.
Who is Stately?
We're Stately, a small team founded by David Khourshid, the creator of XState. Stately is building Stately Studio, where you can visualize your application logic and collaborate with your whole team.