Stimulus is the Rails team JavaScript framework which intends to provide an elegant and simple solution to enhancing HTML interactivity without reaching for the complexity of a full Single Page Application (SPA). It’s meant for developers looking to augment their normal Rails, server-rendered pages with just a bit of client-side JavaScript.

Stimulus is used to add or replace HTML on a page in a light weight manner. You can write customer controllers and view code to make changes to the DOM without going full Single Page App.

At its core, Stimulus revolves around the concept of controllers. A controller in Stimulus is a JavaScript object that augments the behavior of HTML elements. The simplicity of Stimulus lies in its simplicity and in how it connects HTML to JavaScript. Instead of embedding JavaScript within your HTML, Stimulus allows you to write clear, maintainable, and reusable code by connecting HTML elements to JavaScript objects.

Lets look at an example:

<div data-controller="number">
  <button data-action="click->number#set">
    Generate a random number
  </button>
  <span data-number-target="output">
    Put a number here.
  </span>
</div>

// number_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
  static targets = ["output"]

  set() {
    this.outputTarget.textContent = Math.floor(Math.random() * 10);
  }
}

This code will fill in the output span (where it says “Put a number here”) with a random number 0 to 9 each time the button is pressed.

In this example, a Stimulus controller named number is connected to a div element. The button within this div triggers the set action of the number controller when clicked. This action then updates the text content of the span, which is marked as the output target, with a random number.

What sets Stimulus apart is its focus on augmenting HTML. Unlike frameworks that take over the entire front end, Stimulus is designed to sprinkle JavaScript functionality onto existing HTML elements. This makes it an ideal choice for applications where you want to keep the majority of your page rendering on the server side, but still need some interactive, client-side behavior.

Stimulus achieves this by using a few simple data attributes in your HTML. The data-controller attribute specifies which controller to use, while data-action defines what action to perform on a specific event, like a button click. The data-target attribute is used to reference elements within the controller, allowing you to easily access and manipulate them from your JavaScript code.

The framework is also incredibly lightweight, making it a breeze to integrate into existing projects, regardless of their size. It follows the principles of progressive enhancement, ensuring that your web pages remain functional even if JavaScript fails to load or is disabled in the browser. This approach not only improves the user experience but also enhances the accessibility of your web application.

Moreover, Stimulus plays well with other JavaScript libraries and frameworks, so you can easily combine it with other tools in your stack as needed. This interoperability makes Stimulus a versatile tool for a wide range of web development scenarios.

Stimulus provides an efficient and streamlined way to add interactive features to your web applications. By keeping JavaScript unobtrusive and separate from your HTML, Stimulus promotes maintainable and scalable code. Its simple and intuitive API, coupled with its lightweight nature, makes it an excellent choice for enhancing HTML with just enough JavaScript, offering a perfect middle ground between static pages and full-blown SPAs.