How statelyai/xstate works
XState is a JavaScript/TypeScript state-management monorepo: its core models state machines and actors, then interprets events into snapshots and effects. Framework packages expose those actors to UI reactivity; a separate event-based store serves simpler state needs, and inspection and graph utilities support visibility and path analysis. The main user workflow is define logic, create and run an actor, send events, and observe snapshots. README capability descriptions inform unsampled package branches; only the sampled adapter and inspector internals support detailed wiring claims.
Main entry points: State.ts Running Actor · createActor.ts Actor Creation · store.ts Store API · transition.ts Transitions
Components 28
Machines and Actors
- Machine Definition
packages/core/src/createMachine.ts - State Logic
packages/core/src/StateMachine.ts - Actor Creation
packages/core/src/createActor.ts - Running Actor
packages/core/src/State.ts - Transitions
packages/core/src/transition.ts - State Nodes
packages/core/src/StateNode.ts - Actions
packages/core/src/actions.ts - Guards
packages/core/src/guards.ts - Actor Logic
packages/core/src/actors/index.ts - Event Mailbox
packages/core/src/Mailbox.ts - Snapshots
packages/core/src/getNextSnapshot.ts
UI Integrations
- React Bindings
packages/xstate-react/src/useActor.ts - Solid Bindings
packages/xstate-solid/src/useActor.ts - Svelte Bindings
packages/xstate-svelte/src/useActor.ts - Vue Bindings
packages/xstate-vue/src/useActor.ts
Event Store
- Store API
packages/xstate-store/src/store.ts - Store State
packages/xstate-store/src/atom.ts - Persistence
packages/xstate-store/src/persist.ts - Store Bindings
packages/xstate-store-react/src/index.ts
Inspection and Graphs
- Inspector
packages/xstate-inspect/src/inspectMachine.ts - Browser Inspector
packages/xstate-inspect/src/browser.ts - WebSocket Inspector
packages/xstate-inspect/src/server.ts - Graph Traversal
packages/core/src/graph/index.ts - Model Testing
packages/core/src/graph/TestModel.ts - Generated Paths
packages/core/src/graph/pathGenerators.ts
Other components
- Application Developer
- Application
- WebSocket Clients
Connections 37
- Application Developer → Machine Definition: defines
- Machine Definition → State Logic: creates logic
- Application → Actor Creation: starts runtime
- Actor Creation → State Logic: instantiates
- Actor Creation → Running Actor: creates
- Application → Running Actor: sends events
- Running Actor → Event Mailbox: queues events
- Running Actor → Transitions: processes events
- Transitions → State Nodes: selects transitions
- Transitions → Guards: checks conditions
- Transitions → Actions: executes actions
- Actions → Actor Logic: invokes actors
- Running Actor → Snapshots: emits snapshots
- Snapshots → Application: observed by
- React Bindings → Actor Creation: creates actor
- React Bindings → Running Actor: subscribes
- Solid Bindings → Actor Creation: creates actor
- Solid Bindings → Running Actor: reads snapshots
- Svelte Bindings → Actor Creation: creates actor
- Svelte Bindings → Running Actor: subscribes
- Vue Bindings → Actor Creation: creates actor
- Vue Bindings → Running Actor: selects snapshots
- Application Developer → Store API: defines handlers
- Application → Store API: sends events
- Store API → Store State: updates state
- Store API → Persistence: persists state
- Store API → Store Bindings: exposes bindings
- Application → Browser Inspector: configures inspection
- Browser Inspector → Inspector: forwards events
- Running Actor → Inspector: reports activity
- WebSocket Inspector → Inspector: creates service
- WebSocket Inspector → WebSocket Clients: broadcasts inspection
- WebSocket Clients → WebSocket Inspector: forwards messages
- Application Developer → Graph Traversal: requests traversal
- Graph Traversal → Machine Definition: analyzes machine
- Model Testing → Graph Traversal: uses traversal
- Model Testing → Generated Paths: generates paths