xstate

State machines and statecharts for reliable app logic — make impossible states impossible.

xstate

General JS

State machines and statecharts for reliable app logic — make impossible states impossible.

npmGitHubDocs

Fit

Bundle (gzip)

14.5 kB

45.9 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Complex flows — checkout, multi-step forms, media players — quickly rot into a tangle of boolean flags (isLoading, isError, hasSubmitted) that can combine into contradictory states. Reasoning about "what can happen next" becomes guesswork, and edge cases slip through.

What It Does

XState lets you model logic as an explicit finite state machine or statechart: named states, guarded transitions, and side effects that only run in the states you allow. Because transitions are declared up front, illegal combinations simply can't occur, and the machine doubles as living documentation you can visualize.

Installation

bash
npm install xstate

Usage Example

js
import { createMachine, createActor } from 'xstate';

const toggleMachine = createMachine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: { on: { TOGGLE: 'active' } },
    active: { on: { TOGGLE: 'inactive' } },
  },
});

const actor = createActor(toggleMachine).start();
actor.send({ type: 'TOGGLE' }); // -> 'active'

Related packages

ai (Vercel AI SDK)General JS

Unified TypeScript SDK for building AI-powered apps — switch between 20+ LLM providers without rewriting code.

animejsGeneral JS

Lightweight JavaScript animation library with a tiny footprint and a powerful, expressive API.

AOSGeneral JS

An easy-to-use library that makes elements fade, slide, or zoom into view as the user scrolls down your page.

archiverGeneral JS

Streaming interface for generating ZIP and TAR archives in Node.js — create compressed archives programmatically from files, directories, and buffers.

@formkit/auto-animateGeneral JS

> Add smooth transitions to any element with a single line — zero-config animations for adds, removes, and moves.