JavaScript: "Stimulus" Framework

Stimulus, the "JavaScript Framework for the HTML You Already Have", Releases 2.0

Stimulus inspired Catalyst, GitHub’s web component set of patterns.

Stimulus is a JavaScript framework with modest ambitions. It doesn’t seek to take over your entire front-end—in fact, it’s not concerned with rendering HTML at all. Instead, it’s designed to augment your HTML with just enough behavior to make it shine.

Stimulus’ concept of controller will be familiar to users of Rails and Laravel. Stimulus originates from some of the developers who created Rails. Direct DOM updates and using DOM state as the source of truth will equally be familiar to long-time programmers who started web development with jQuery and jQuery plugins. The Basecamp team behind Stimulus reported using in the past a variety of techniques and libraries such as jQuery for building Basecamp.

<!--HTML from anywhere-->
<div data-controller="hello">
  <input data-hello-target="name" type="text">

  <button data-action="click->hello#greet">
    Greet
  </button>

  <span data-hello-target="output">
  </span>
</div>

That HTML source is mapped to the following JavaScript code:

// hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "name", "output" ]

  greet() {
    this.outputTarget.textContent =
      `Hello, ${this.nameTarget.value}!`
  }
}