JavaScript state machines and statecharts
JavaScript and TypeScript finite state machines and statecharts for the modern web.
📖 Read the documentation 📑 Adheres to the SCXML specification.
Packages
- 🤖
xstate
- Core finite state machine and statecharts library + interpreter - 🔬
@xstate/fsm
- Minimal finite state machine library - 📉
@xstate/graph
- Graph traversal utilities for XState - ⚛️
@xstate/react
- React hooks and utilities for using XState in React applications - ✅
@xstate/test
- Model-based testing utilities for XState
Super quick start
npm install xstate
; // Stateless machine definition// machine.transition(...) is a pure function used by the interpreter.const toggleMachine = ; // Machine instance with internal stateconst toggleService = start;// => 'inactive' toggleService;// => 'active' toggleService;// => 'inactive'
- Visualizer
- Why? (info about statecharts)
- Installation
- Finite State Machines
- Hierarchical (Nested) State Machines
- Parallel State Machines
- History States
Visualizer
Visualize, simulate, and share your statecharts in XState Viz!
Why?
Statecharts are a formalism for modeling stateful, reactive systems. This is useful for declaratively describing the behavior of your application, from the individual components to the overall application logic.
Read 📽 the slides (🎥 video) or check out these resources for learning about the importance of finite state machines and statecharts in user interfaces:
- Statecharts - A Visual Formalism for Complex Systems by David Harel
- The World of Statecharts by Erik Mogensen
- Pure UI by Guillermo Rauch
- Pure UI Control by Adam Solove
- Spectrum - Statecharts Community
Finite State Machines
; const lightMachine = ; const currentState = 'green'; const nextState = lightMachinevalue; // => 'yellow'
Hierarchical (Nested) State Machines
; const pedestrianStates = initial: 'walk' states: walk: on: PED_TIMER: 'wait' wait: on: PED_TIMER: 'stop' stop: {} ; const lightMachine = ; const currentState = 'yellow'; const nextState = lightMachinevalue;// => {// red: 'walk'// } lightMachinevalue;// => {// red: 'wait'// }
Object notation for hierarchical states:
// ...const waitState = lightMachinevalue; // => { red: 'wait' } lightMachinevalue; // => { red: 'stop' } lightMachinevalue; // => 'green'
Parallel State Machines
const wordMachine = ; const boldState = wordMachinevalue; // {// bold: 'on',// italics: 'off',// underline: 'off',// list: 'none'// } const nextState = wordMachinevalue; // {// bold: 'off',// italics: 'on',// underline: 'on',// list: 'bullets'// }
History States
const paymentMachine = ; const checkState = paymentMachine; // => State {// value: { method: 'check' },// history: State { ... }// } const reviewState = paymentMachine; // => State {// value: 'review',// history: State { ... }// } const previousState = paymentMachinevalue; // => { method: 'check' }
Sponsors
Huge thanks to the following companies for sponsoring xstate
. You can sponsor further xstate
development on OpenCollective.