Resources

Books / Research Papers

The original description of statecharts, Statecharts: A visual formalism for complex systems PDF, by David Harel

State Chart XML (SCXML), State Machine Notation for Control Abstraction, W3C Recommendation, 2015

Constructing the User Interface with Statecharts, Ian Horrocks, 1999

Practical Statecharts in C/C++ — discusses some of the same things that Ian Horrocks’ book discusses. The book is freely available as a PDF download.

Statecharts and SCXML as a modeling technique in web engineering, Proceedings of Balisage: The Markup Conference 2015

Developing User Interfaces using SCXML Statecharts Gavin Kistner & Chris Nuernberger, 2014 - A paper about how Nvidia developed automotive UI using state charts and SCXML.

Client-Side State-based Control for Multimodal User Interfaces, David Junger’s master’s thesis explores the appeal and (ease of) use of an executable State Chart language on the client-side to design and control multimodal Web applications.

UML Statecharts or “UML state machines” on wikipedia provides a good overview

Blog posts / Articles

UML Statechart tip: Handling errors when entering a state, by Matthew Eshleman, 2020

UML Statechart tip: Be wary of exit-state behavior, by Matthew Eshleman, 2020

The most elegant debounce code you’ll ever write featuring XState, by Mikey Stengel, 2020

Using State Machines in Vue.js with XState, Sarah Dayan, 2020

Coding for complexity, Dan Reynolds, 2019

State machine advent: 24 bite-sized blog posts about state machines and statecharts, Mikey Stengel, 2019

My love letter to XState and statecharts ♥, Tim Deschryver, 2019

Dynamic orthogonal regions in state machines, Łukasz Makuch, 2019

Patterns for using React with Statechart-based state machines, Shawn McKay, 2018

How to visually design state in JavaScript, Shawn McKay, 2018

Finite State Machines with React, By Jon Bellah, 2018

An introduction to visual automata-based programming in Rosmaro, Łukasz Makuch, 2018

Statecharts: Updating UI state, Luca Matteis, 2018

Programming without boolean values: To-Do App, Łukasz Makuch, 2018

How to model the behavior of Redux apps using statecharts, Luca Matteis, 2018

React and visual automata-based programming, Łukasz Makuch, 2018

The Rise Of The State Machines, Krasimir Tsonev, 2018

Pure UI Control, Adam Solove, 2017

A Crash Course in UML Statecharts (PDF), Miro Samek, 2009

State charts can provide you with software quality insurance by Peter Mueller, embedded.com, 2009

UML Statecharts at $10.99, Miro Samek, Dr. Dobb’s magazine, 2006

Statecharts: Some Critical Observations (PDF), by Michael Breen, 2004

Who moved my state? by Miro Samek, Dr. Dobb’s magazine, 2003

Presentations

Reactive State Machines and Statecharts, by David Khourhid, 2018

setState Machine, by Michele Bertoli, 2018

Simplifying Complex UIs with Finite Automata & Statecharts, by David Khourshid, 2018

Are statecharts the next big UI paradigm?, Luca Matteis, 2017

Infinitely Better UIs with Finite Automata, David Khourshid, 2017

Rambling thoughs on React and FSM, Ryan Florence, 2017

Telling stories using statecharts, Erik Mogensen, 2015

Using ClojureScript w/ Heavy Industrial Equipment, Kevin Lynagh, 2015

Statecharts in User Interfaces (Slides), Erik Mogensen, 2014

UML State Chart Autocoding for the Mars Science Laboratory (MSL) Mission Eddie Benowitz, JPL, 2012

Statecharts based GUI Design, Chenliang Sun, 2003

Training material

Mathworks has a short four-part series on state machines from 2014: What are they? (3:14), Why use them? (3:37), Mealy and Moore machines (3:38), and finally the one that introduces statecharts, Harel State Machines (2:36).

DevanB has some practical examples of statechart-based solutions with xstate, with examples in React, Svelte and Vue.

Software

MiceOnABeam, a modeling tool for the Second Life® and OpenSim based virtual worlds. Uses a subset of statecharts

QT Creator includes an SCXML editor, which provides a GUI to edit Statechart XML documents.

SCA the Statechart Autocoder used by Curiosity, by JPL. Generates C code from Magicdraw drawings of statecharts.

sketch.systems, a web-app to draw statecharts and bind them to user interface elements. “Helps software designers think about complex product behavior. Sketch out states, add prototypes, and clarify questions quickly.”

sm-cat, a tool that makes statecharts that look good, with the least effort possible without having to interact with drag and drop tools.

StatesKit Visual Statechart Editor — Visually creating Statechart and Finite State Machine.

ThingML, includes a DSL for statecharts, compilers to various languages.

Yakindu Statechart Tools, also on GitHub. User interface and code generation tool (?)

Tools / Libraries

Boost.org statechart module, a C++ library for finite state machines

Commons SCXML by Apache, a Java implementation of an SCXML parser and runner.

ember-statecharts, by Michael Klein, Statecharts for Ember.js applications

jsscxml, by David Junger, A JavaScript State Chart interpreter that fully implements SCXML

harel, by Jay R Bolton, Harel Statecharts in javascript for declarative UI

LXSC, by Gavin Kistner, Lua XML StateChart interpreter - parses and executes SCXML state machines with a Lua data model.

µFSM, by Jonas Persson, UML Statechart library in C and XMI importer.

Miros, statecharts in Python.

React Automata by Michele Bertoli, a state machine abstraction for React.

rFSM Statecharts, by Markus Klotzbuecher, a lightweight Statechart implementation in Lua

Rosmaro by Łukasz Makuch, a visual automata-based programming framework for writing JavaScript functions.

SCION, SCION-CORE et al, by Jacob Beard. An SCXML parser and runner in JavaScript.

Sismic, by Alexandre Decan, Sismic Interactive Statechart Model Interpreter and Checker, Python.

statechart.js, by Corey Burrows, a JavaScript implementation of a Harel Statechart.

statechart.js, by Cameron Bytheway, a JavaScript SCXML compiler/interpreter.

statechart, by David Durman, a Statechart implementation in JavaScript

statechart, by Casey Marshall, a rust implementation of statecharts: hierarchical, reactive state machines

State Machine Framework, and Declarative State Machine Framework, both actually statecharts with SCXML semantics, part of the Qt framework, by Qt.

Stately, by Alan Shaw, Statecharts in Clojure/Script

stent, by Krasimir Tsonev, combining the ideas of Redux with the concept of state machines.

SproutCore has statecharts built in to the heart of the platform, and is introduced in part 2 of their Getting Started guide.

uscxml, from the Department of Computer Science, Telecooperation Lab (TK) at Darmstadt Technical University, is an SCXML interpreter and transformer/compiler written in C/C++ with bindings to Java, C#, Python and Lua.

XState, by David Khourshid, pure functional statecharts, in TypeScript.

Reference Material

Designing Statecharts from the IBM Rational Rhapsody. It describes all of the concepts albeit in how they are used in that application.

Guidelines for modeling statecharts in the Rational Unified Process. Includes a good section on Hints and Tips on creating statecharts!