Statecharts.sh

Statecharts are a formal way to describe the behavior of reactive systems. They extend finite state machines with hierarchy, concurrency, and communication—making complex UI logic predictable and visualizable.

Define your states, transitions, and actions declaratively. The statechart handles the rest: which transitions are valid, what state you're in, and what happens next.

{
  "$schema": "https://statecharts.sh/schema.json",
  "version": 1,
  "id": "trafficLight",
  "initial": "red",
  "context": {},
  "states": {
    "red": {
      "on": { "TIMER": { "target": "green" } }
    },
    "green": {
      "on": { "TIMER": { "target": "yellow" } }
    },
    "yellow": {
      "on": { "TIMER": { "target": "red" } }
    }
  }
}

A TypeScript-first library for building statecharts. Define states, transitions, and context declaratively.

import { chart } from "statecharts.sh"

const trafficLight = chart({
  context: {},
  initial: "red",
  states: {
    red: { on: { TIMER: "green" } },
    green: { on: { TIMER: "yellow" } },
    yellow: { on: { TIMER: "red" } },
  }
})

const instance = trafficLight.start()
instance.send("TIMER")  // → green

Statecharts.sh defines a JSON Schema for statechart exports, enabling validation, editor autocomplete, and interoperability between tools.

Use the schema to validate your statechart definitions, generate documentation, or build custom tooling around the standard format.

Visualize your statecharts as interactive diagrams. See states, transitions, and the current state of your machine in real-time as your application runs.

Debug complex state logic visually. Step through transitions, inspect context, and understand exactly how your machine behaves.