JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Router Demo</title>
    <script type="text/javascript" src="http://github.com/jakesgordon/javascript-state-machine/raw/master/state-machine.js"></script>
  </head>
  <body>
    <button id="back-btn">Back</button>
    <button id="next-btn">Next</button>
  </body>
</html>

JavaScript

var $ = function(id) { return document.getElementById(id); }

var fsm = StateMachine.create({

  //*** Here we set defer to true
  initial: { state: "intro", event: "init", defer: true },
  events: [

    // Next events and where to route based on our page
    { name: "next", from: "intro",   to: "getname" },
    { name: "next", from: "getname", to: "welcome" },
    { name: "next", from: "welcome", to: "why" },

    // We can't go "back" from the initial route
    { name: "back", from: "getname", to: "intro" },
    { name: "back", from: "welcome", to: "getname" },
    { name: "back", from: "why",     to: "welcome" } ],
});

window.onload = function() {
  var router = {
    update: function(event, from, to) {
        
      // Let's log the state to the console
      console.log(fsm.current);
      window.location.hash = "#/" + to;
      $("back-btn").disabled = fsm.cannot("back");
      $("next-btn").disabled = fsm.cannot("next");
    },
    location: window.location.hash.substring(2),
  }

  //*** And now we attach the callbacks since we have created the router object
  fsm.onintro = router.update, fsm.ongetname = router.update,
  fsm.ongetname = router.update, fsm.onwelcome = router.update,
  fsm.onwhy = router.update;

  //*** And call the init event!
  fsm.init();
    
  // Setup click handlers for JSFiddle
  $("back-btn").addEventListener("click", function(e) {
      fsm.back();
  });
  $("next-btn").addEventListener("click", function(e) {
      fsm.next();
  });
}