Examples Overview

The examples cover real-world patterns, from async health checks to React integration to test-suite design. Each one is a self-contained app you can run locally, and the deployed docs site hosts the browser ones at their own routes.

Examples

Example	What it demonstrates	Key machina features
Connectivity Monitor	Network connectivity tracking with async health checks	createFsm, async in _onEnter, AbortController cleanup in _onExit, custom events
Traffic Intersection	Hierarchical traffic light controller with pedestrian signals	_child delegation, compositeState(), input bubbling, defer(), child auto-reset
Dungeon Critters	Multiple critter instances sharing one FSM definition	createBehavioralFsm, per-client state via WeakMap, shared behavior definition
Shopping Cart	Checkout flow with deferred operations	createFsm, defer(), defer({ until }), lifecycle hooks
Job Queue	Persist/restore pattern with rehydrate() and localStorage	createBehavioralFsm, dehydrate(), rehydrate(), silent restore, side-effect recovery
With React	A checkout flow with the machina-react hooks	createFsm, machina-react (useFsm, useFsmSelector), framework integration
machina-explorer	Interactive FSM inspector and state diagram visualizer	buildStateGraph, inspectGraph, mermaid stateDiagram-v2, CodeMirror 6
Testing with machina-test	Graph matchers, hierarchical FSM testing, and walkAll runtime testing	machina-test matchers, walkAll, payload generators, seed replay
inspect-demo	A terminal tour of inspect() against intentionally buggy configs	machina-inspect, inspect(), buildStateGraph(), child FSM findings

Try them live

On the deployed docs site, each browser example is a working app at /demos/{name}/. The doc pages above explain the patterns, and the “Run” link at the top of each page opens the live app in a new tab.

During local development, each browser example runs on its own Vite dev server, which the docs site doesn’t serve. See below.

Running locally

# Run any example's dev server
pnpm --filter @machina-examples/connectivity dev

# Or from the example directory
cd examples/connectivity && pnpm dev

Swap connectivity for any of the browser example names: traffic-intersection, dungeon-critters, shopping-cart, job-queue, with-react, or machina-explorer.

The testing-with-machina-test example runs as a jest suite: pnpm --filter @machina-examples/testing-with-machina-test test. The inspect-demo example prints to the terminal: pnpm --filter @machina-examples/inspect-demo demo.