Stately

Stately started as a visual editor for XState, the popular JavaScript state machine library, and has grown into a full modeling and reasoning layer for application logic. Instead of describing behavior in prose or letting it hide inside conditional branches, you draw it as a statechart: states, transitions, events, guards, and actions on one canvas. The editor renders the graph and the underlying configuration side by side, so changing the diagram updates the source and vice versa. Stately's positioning is that a code diff shows which lines moved, but not that a refund path became unreachable; a statechart shows the behavior change directly.

The platform's newer focus is agentic development. Stately runs a hosted MCP server over streamable HTTP that Claude Code, Codex, Cursor, VS Code, and other MCP clients can connect to in a few commands. Through it, an agent can scan a repository, extract machines from source, validate a machine, convert between XState, SCXML, Mermaid, and D2, diff two versions of a machine, enumerate paths, simulate events, and render diagrams. There is also a CLI (npx statelyai) for scanning, pushing, pulling, and diffing, and the diff command can be wired into CI as a gate that fails a build when machine semantics change.

Beyond individual machines, Stately models whole systems: architecture views connect services, actors, and machines from imported C4, Structurizr, D2, or Mermaid diagrams. The inspector attaches to a running app and streams live state, context, events, and actor activity so you can see what the software is actually doing. The product is used by product engineers, platform teams, and QA and testing groups who need shared, reviewable models of complex logic.