Learn STIMULUS-JS with Real Code Examples

Stimulus adds behavior to HTML via data attributes and controllers.

It emphasizes convention over configuration for fast, maintainable development.

Stimulus controllers respond to events without replacing HTML markup.

Stimulus.Controller

Targets for DOM elements

Actions for events

Values for reactive state

Lifecycle callbacks

Controllers manage elements and logic

Targets connect HTML elements to controllers

Actions bind DOM events to controller methods

Values provide reactive data

Lifecycle callbacks for initialization and cleanup

controllers/ - Stimulus controllers

index.js - entry point & app initialization

views/ - HTML templates

assets/ - CSS & JS assets

public/ - static files

Define a controller class

Declare targets and values

Connect actions in HTML

Respond to user events

Manage reactive state via values

Beginner: simple form interactions

Intermediate: multiple controllers with targets

Advanced: stateful widget coordination

Expert: integrating with Turbo streams

Community: plugins and extensions

Lighter than React/Vue

More declarative than jQuery alone

Focused on server-rendered HTML

No SPA abstractions

Complementary to Turbo/Hotwire

2016 – Initial release by Basecamp

2017 – Early adoption in Rails apps

2019 – Hotwire & Turbo integration

2021 – Stable community adoption

2025 – Continued maintenance and modern ES support

Controller: JS class connected to HTML

Target: DOM element reference

Action: Event binding via HTML

Value: Reactive data for a controller

Connect: Lifecycle callback for attachment