SCXML 1.0 · ECMAScript data model

Statecharts you can run, see and step through

scxmljs is a correctness-first SCXML interpreter that passes every mandatory W3C test, with two custom elements that render running charts in any framework: <scxml-view> draws a whole chart, <scxml-explorer> explores whole systems level by level.

npm install @tinyactors/scxmljs

Get started See the demos GitHub

Live: <scxml-view src="traffic-light.scxml">More charts

The explorer stepping through an order-fulfilment system: the tree of states, the focused compound state, the events it accepts, and the system of machines and services. — `<scxml-explorer>` on a three-machine order system. Full-resolution video · try it

Why scxmljs

160 / 160

Conformant

Every mandatory W3C SCXML test passes, in both data models. The algorithm follows the spec's Appendix D procedure by procedure.

Sandboxed

Safe for user charts

Each session gets its own QuickJS context: no access to the page, other sessions, or the network, and runaway scripts are stopped.

16 KB

Or trusted and tiny

For your own charts, the trusted entry runs on the page's engine with the same semantics and no WebAssembly download.

▶ ⏸ ⏭

Playback built in

A PlaybackClock pauses, steps and speeds up whole systems: machines, delayed events and simulated services together.

Any framework

Custom elements

Plain web components with properties, events, slots and ::part(). Tested with React, Vue, Svelte and Angular.

Accessible

Keyboard and screen readers

Tree navigation, live announcements, WCAG AA contrast in both themes, and zero axe violations in three browser engines.

Two elements, two jobs

<scxml-view>

Drop-in and zero-JavaScript: point it at a chart and it loads, validates, runs and draws the whole thing. Transition labels are buttons that send their event.

Reference · Gallery

<scxml-explorer>

For systems too big to draw at once: a tree of states, a focus on one level, the events accepted right now, and a system view of machines and services.

Reference · Demo