Examples
Browse runnable SCXML examples powered by SCION. Each example pairs a statechart with an executable browser interface so the model can be inspected and exercised directly.
Videos
Recorded demos of SCION and SCXML examples.
Example Videos
A single page of embedded SCION demo videos, including the Morse code hardware demo.
Thure tutorials
The original guided SCXML tutorial examples, updated to run in the browser with SCION.
Nancy Drew Vampire Tutorial
A guided tutorial showing how SCXML models a small event-driven character state machine.
Light Switch
A first example of using events and states to model simple behavior.
Compound States
Examples showing how hierarchy makes larger state machines easier to model.
History States
Examples of restoring a previous nested state with SCXML history.
Ported SCXML tutorials
Runnable SCION, SCHVIZ, and React ports of examples collected by Alex Zhornyak.
W3C Language Overview
A browser-compatible adaptation of the W3C overview chart showing nested states, finals, parallel completion, delayed sends, and external events.
W3C Microwave
A live version of the W3C microwave oven statechart with SCHVIZ and an executable HTML5 appliance panel.
W3C Microwave Parallel
A parallel-state microwave oven that separates engine and door behavior while keeping the HTML5 panel executable.
W3C Calculator
A calculator statechart with a live keypad for digits, decimal points, operators, and result calculation.
StopWatch
A two-button stopwatch with SCXML-driven start, pause, resume, reset, lap, and display update behavior.
Morse Code Trainer
An EcmaScript-datamodel Morse keyer that decodes timed dot, dash, short pause, and long pause events.
Dining Philosophers
A live resource-hierarchy solution where five philosophers acquire numbered forks without deadlocking.
Pattern examples
Executable SCXML models for software architecture and business-process patterns.
Circuit Breaker Pattern
A resilience pattern model with closed, open, and half-open states, failure thresholds, cooldown, and probe requests.
Business Process
A BPMN-style order fulfillment process with validation, inventory branching, parallel payment and packing, shipping, completion, and cancellation.
External example ports
Runnable SCION ports of examples from other state machine and SCXML projects.
Fetch
A SCXML port of Stately's simple fetch example, with idle, loading, success, failure, retry, cancel, and reset behavior.
Source: Stately XState examples
Qt FTP Client
A browser simulation of Qt's FTP client state structure, including command sending, reply handling, password request, success, and failure states.
Source: Qt SCXML FTP Client example
Toggle
A SCXML port of Stately's two-state toggle example, with active/inactive states and explicit set/reset events.
Source: Stately XState Toggle example
Project examples
Example applications and integration projects from the local projects/examples tree.
VanillaJS Light Switch
A plain JavaScript light switch application driven by a small SCXML state machine.
projects/examples/vanillajs-light-switch
jQuery Drawing Tool
A jQuery/SVG drawing tool example backed by an SCXML interaction model.
projects/examples/jquery-drawing-tool
Universal Morse Input/Output
A visual Morse code parser implemented in SCXML, with browser and hardware-oriented input/output.
projects/examples/universal-morse-input-output
vi Everywhere
An executable model of vi editor behavior using Statecharts and an SVG-based editing environment.
projects/examples/vi
React Redux Drag and Drop
A Redux integration example where SCXML drives drag-and-drop behavior.
projects/examples/react-redux/drag-and-drop-redux/drag-and-drop-redux
React Redux Drag and Drop with DevTools
The Redux drag-and-drop example with Redux DevTools and the SCION monitor integration.
projects/examples/react-redux/drag-and-drop-redux/drag-and-drop-redux-with-devtools
BotBuilder First Run
A Microsoft BotBuilder sample implemented with SCION and SCXML.
projects/examples/botbuilder/examples/basics-firstRun
BotBuilder Menus
A BotBuilder menu flow implemented with SCION common bot components.
projects/examples/botbuilder/examples/basics-menus
BotBuilder Multi-turn
A multi-turn BotBuilder conversation modeled with SCXML.
projects/examples/botbuilder/examples/basics-multiTurn
BotBuilder Waterfall
A BotBuilder waterfall sample using the shared SCION BotBuilder components.
projects/examples/botbuilder/examples/basics-waterfall
BotBuilder Hello ChatConnector
A Hello ChatConnector BotBuilder sample powered by SCXML.
projects/examples/botbuilder/examples/hello-chatConnector
Webpack SCXML Bundle
A Webpack example showing SCXML bundled into a browser application.
projects/examples/webpack
Scharpie Validation Tests
A small validation example for linting SCXML with the scharpie ESLint plugin.
projects/examples/test-scharpie
SCXML.IO Gatsby Site
This Gatsby site, including the live SCION, SCHVIZ, and React examples.
projects/examples/sciblog