Setup overview

State A
State B
State C

Typical demo setup

All of the examples are set up in the same way:

  1. HTML elements to represent state, and buttons to call actions
  2. Global CSS styles to make the page look pretty, with local styles where required
  3. A page script to configure the states and handlers and create the StateMachine
  4. A call to a StateHelper (see below) which takes care of the base wiring from the StateMachine to your UI

The code for the example above is:

var fsm = new StateMachine({
    transitions: [
        'next : a > b > c',
        'back : a < b < c'


This code sets up the StateMachine's transitions (actions and states) and in is where you add additional event listeners, configuration, etc.

The call to StateHelper is optional, but it can used to quickly wire up a UI (see below).

Note the following regarding all demo files:

Basic handler/event setup

StateMachine communicates changes in its state to the outside world via events.

In order to respond to a system changing state, you need to assign event handlers, either through the config, or manually:

// config
handlers: {
    'change': function(event, fsm) {
        // update ui
        // do stuff

// manually
fsm.on('change', function(event, fsm) {
    // update ui
    // do stuff

Handlers for a connected UI

There are various states you'll want to to monitor to reflect available actions, states and transition for any connected UI, and they are:

If you think your system will have additional state and/or actions added or removed, you'll also need to listen to:

As with vanilla JavaScript, any passed events will contain information regarding the state change, and you should update your UI accordingly.


Although it's quite straightforward to set up event handlers yourself, the JavaScript code is essentially the same between applications, so a class, StateHelper, is provided to give you one-liner setup of the very basics, including:

StateHelper has a few environment-specific methods that cater for jQuery, Vue, etc., that auto-wire UIs, depending on your setup.

It is strongly advised if you are going to use StateHelper, to look at and understand the underlying code. It's not at all complicated, but it is recommended to get a handle on pub/sub setup.

See the next section for more info.