Learn STIMULUS-JS with Real Code Examples
Updated Nov 22, 2025
Architecture
Controller-centric
Event-driven with HTML actions
Declarative data bindings via targets
Values for controller state
No virtual DOM or reactive diffing
Rendering Model
DOM-driven updates
Declarative event binding via actions
Reactive values for state
Lifecycle callbacks for initialization and cleanup
No virtual DOM
Architectural Patterns
Controller-per-element or per-widget
Target-driven DOM references
Action-based event handling
Value-driven reactive state
HTML-first progressive enhancement
Real World Architectures
Rails apps with Turbo + Stimulus
Server-rendered CMS platforms
Dynamic dashboards with light JS
Interactive forms and modals
Admin panels with minimal SPA complexity
Design Principles
Enhance HTML instead of replacing it
Controller-based structure
Convention over configuration
Minimal footprint
Progressive enhancement first
Scalability Guide
Use one controller per widget
Keep targets limited
Avoid global state
Use values for isolated reactive state
Combine with Turbo for larger apps
Migration Guide
Enhance HTML progressively instead of replacing it
Convert jQuery widgets to controllers
Use Turbo frames and streams for dynamic updates
Replace inline JS with controller methods
Modularize behaviors into controllers