Examples Overview

machina ships with five runnable example apps covering real-world patterns — from async health checks to React integration. Each one is a self-contained app you can run locally, and on the deployed docs site they’re live 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
With React	React integration for a todo app	createFsm, useSyncExternalStore, framework integration

Try them live

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

During local development, examples run on their own Vite dev server — the docs site doesn’t serve them. 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 example names: traffic-intersection, dungeon-critters, shopping-cart, or with-react.