Visual State Machine Builder

Design states, define transitions, simulate event flows, and export XState JSON, a TypeScript reducer, or a Mermaid diagram — all visually.

States4

Idle

Waiting for user action

FETCH_START →loading
Loading

Fetching data from server

FETCH_SUCCESS →successFETCH_ERROR →error
Success

Data loaded successfully

RESET →idle
Error

Request failed

RESET →idle

Transitions5

idleloadingFETCH_START
loadingsuccessFETCH_SUCCESS
loadingerrorFETCH_ERROR
erroridleRESET
successidleRESET

Live Simulator

Waiting for user action

Fire event from idle:

Generated Code

import { createMachine } from "xstate";

const machine = createMachine({
  id: "stateMachine",
  initial: "idle",
  states: {
    idle: {
      // Waiting for user action
      on: {
        FETCH_START: "loading"
      }
    },
    loading: {
      // Fetching data from server
      on: {
        FETCH_SUCCESS: "success",
        FETCH_ERROR: "error"
      }
    },
    success: {
      // Data loaded successfully
      type: "final"
      on: {
        RESET: "idle"
      }
    },
    error: {
      // Request failed
      type: "final"
      on: {
        RESET: "idle"
      }
    }
  }
});

Why Use State Machines for UI Logic?

Most UI bugs stem from implicit, untested state — a button that can be clicked while a request is already in flight, a form that can be submitted in an error state, or a modal that can be opened while another is closing. Finite state machines make these impossible states structurally impossible by explicitly defining every valid state and the exact events that can cause transitions between them.

By designing your UI logic as a state machine first, then generating the code, you get a shared artifact that developers, QA engineers, and product managers can all reason about — before a single line of component code is written.

When to Use State Machines

  • Async data fetching flows (idle → loading → success/error → idle)
  • Multi-step wizard or onboarding flows
  • Authentication lifecycles (unauthenticated → authenticating → authenticated → logging out)
  • Media players (stopped → playing → paused → buffering)
  • E-commerce checkout state (cart → address → payment → confirmation)

State Machine FAQs

A finite state machine (FSM) is a mathematical model of computation that can be in exactly one of a finite number of states at any given time. It transitions between states based on input events. FSMs are extremely useful for modeling UI logic (loading → success/error), multi-step forms, game states, and network protocol handlers.

It generates three formats: (1) XState-compatible machine configuration ready for use with the xstate npm package, (2) a plain TypeScript reducer function you can drop into any React or Node project, and (3) a Mermaid stateDiagram-v2 code block you can paste into mermaid.live or your documentation.

Yes. The Live Simulator lets you click event transition buttons to walk through your state machine step-by-step. A history breadcrumb shows the full path taken, and you can undo steps or reset to the initial state at any time.

XState is a popular JavaScript/TypeScript library for building state machines and statecharts. It is widely used in React, Vue, and Svelte applications to manage complex UI state in a predictable, visualizable way. This tool generates XState v5-compatible machine configurations.

Yes. Each state has an optional description field. Descriptions are shown in the simulator when that state is active, appear as comments in the XState code output, and help document intent for teammates reviewing the machine.

Related AI Workbench

All Tools