Learn STIMULUS-JS with Real Code Examples

Install via npm: `npm install @hotwired/stimulus`

Or include via CDN

Initialize Application in `index.js`

Register controllers manually or auto-load

Include controllers via ES modules

Install Node.js

Install Stimulus via npm or CDN

Configure module bundler

Set up controllers folder

Link HTML elements via data attributes

index.js - app initialization

controllers/*.js - Stimulus controllers

views/*.html - templates

assets/*.css/js - static assets

package.json - dependencies & scripts

No official CLI

Use npm scripts for bundling

Use Webpack/ESBuild for assets

Rails generators for controllers

Include via CDN in static sites

No built-in i18n

Use Rails or JS libraries

Dynamic text via values

Template-based localization

Custom JS for multi-locale handling

Use semantic HTML

ARIA attributes manually

Accessible event handling

Focus management with actions

Screen reader testing

CSS frameworks like Tailwind

Scoped CSS for widgets

HTML-first templates

Dynamic class toggling via targets

Minimal JS for styling

Controller values

DOM targets for state

Event-driven updates

Inter-controller communication manually

Integration with Turbo streams

Fetch APIs from controllers

Use Turbo streams for updates

Reactive values for state

No built-in global store

Manual REST handling via fetch/XHR