Cacher is the code snippet organizer for pro developers

tape_recorder
  playing
    playing_default*
      pause -> play_paused
      stop -> stopped
      fast_rewind -> play_rewinding
      fast_forward -> play_forwarding
    play_paused
      stop -> stopped
      resume -> playing
    play_rewinding
      stop -> stopped
      pause -> paused
      paused
        resume -> play_rewinding
      track_end -> playing
    play_forwarding 
      stop -> stopped
      track_end -> playing
  fast_rewinding
    fast_rewinding_default*
      stop -> stopped
      play -> playing
      pause -> rw_paused
    rw_paused
      resume -> fast_rewinding
  fast_forwarding
    fast_forwarding_default*
      stop -> stopped
      play -> playing
      pause -> ff_paused
    ff_paused
      resume -> fast_forwarding
  stopped*
    stopped_default*
      play -> playing
      stop -> stopped
      fast_rewind -> fast_rewinding
      fast_forward -> fast_forwarding

containerProps = {
  padding: "8px 10px",
  font: "13px Arial, sans-serif"
};

inputProps = {
  padding: "8px 10px",
  something: "ok"
};

buttonProps = {
  padding: "8px 10px",
  margin: "0 0 0 10px"
};

function render(model) {
  handleSubmit = () => {
    model.emit("click");
    fetchData();
  };

  fetchData = () => {
    document.setTimeout(() => {
      if (Math.random() > 0.5) {
        model.emit("fail");
        return;
      }

      model.emit("success");
    }, 500);
  };

  return $(
    "div",
    { style: containerProps },
    $("input", {
      style: inputProps,
      ref: el => {
        this.input = el;
      }
    }),
    $(
      "button",
      {
        style: buttonProps,
        ref: el => {
          this.input = el;
        },
        onClick: handleSubmit
      },
      "Submit"
    )
  );
}