Wizard

SketchSystems.spec

Wizard
  new -> Input

  Input
    Onboarding*
      next -> Import
    Media
      Import
        back -> Onboarding
        next -> Upload & Choose
      Upload & Choose
        back -> Import
        next -> Theme
    Customize
      Theme*
        back -> Upload & Choose
        next -> Style
      Style
        back -> Theme
        next -> Music
      Music
        back -> Style
        next -> Texts
      Texts
        back -> Music
        next -> Preview

  Preview
    back -> Texts
    next -> Final

  Final

SketchSystems_prototype.js

function render(model){
  let currentState = model.active_states[0].name;
  
  return (
    <div>
      <h1>{currentState}</h1>
      <button onClick={() => model.emit('back')} disabled={currentState === 'Final'}>back</button>
      <button onClick={() => model.emit('next')} disabled={currentState === 'Final'}>next</button>
      &nbsp;
      <button onClick={() => model.emit('new')}>new</button>
    </div>
  );
}