State Machine
Lightweight reactive finite state machines (FSM / statechart) for Vue 3 — declarative states and transitions, parallel regions, guards, and actions.
Declarative state machines and a reactive API
defineMachine creates a pure config with dev‑time validation — no Vue dependency, testable in Node. useMachine wraps it in reactive refs: state, context, send, matches, can, isDone. Everything updates automatically on transition, and the event queue guarantees sequential processing without race conditions.
Guards, actions, and event handling
Synchronous guards (predicates) block transitions and are used in can() for reactive UI control. Actions can be sync or async, execute in order exit → transition → entry, and return Partial<context> to update state. Exceptions in guards are treated as false.
Parallel states and useWizard
A state can launch parallel regions — independent sub‑machines active simultaneously, each with its own state and context. useWizard builds a machine for multi‑step forms from an array of steps with canProceed (sync or async), onEnter/onLeave callbacks, and flexible navigation (next, prev, goTo).
Persistence, sharing, and DevTools
Save state and context to localStorage (or custom Storage) with automatic restoration. useSharedMachine creates a singleton by id, accessible from any component without Pinia. A Vue DevTools panel shows all machines, state, context, history, and lets you send events directly from the inspector.
Lightweight, SSR, and XState v5 compatibility
The core (~4 KB gzip) has no browser APIs — safe for SSR. Persist and DevTools activate only on the client. The API is compatible with XState v5: defineMachine instead of createMachine, actions return Partial<context> instead of assign, and invoke is replaced by async actions. Full typing with TState/TEvent/TContext inference.