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.

import { chart } from "statecharts.sh"

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

A TypeScript-first library for building statecharts. Define states, transitions, and context declaratively. Use the core library standalone or with React bindings.

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 uses SCJSON—a JSON translation of the W3C SCXML specification—for interoperability between tools. Export your statecharts to SCJSON for validation, visualization, and cross-platform compatibility.

Use the schema to validate SCJSON exports, 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.