Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Stimulus.js Counter Controller - Stimulus-js Typing CST Test
Stimulus.js Counter Controller — Stimulus-js Code
Basic counter using Stimulus.js with dark/light theme toggle.
<div data-controller="counter" data-counter-dark-value="false" data-counter-count-value="0">
<h2>Counter: <span data-counter-target="count">0</span></h2>
<div>
<button data-action="click->counter#increment">+</button>
<button data-action="click->counter#decrement">-</button>
<button data-action="click->counter#reset">Reset</button>
</div>
<button data-action="click->counter#toggleTheme">Switch Theme</button>
</div>
<script>
import { Application } from '@hotwired/stimulus';
const application = Application.start();
application.register('counter', class extends Stimulus.Controller {
static targets = ['count'];
static values = { count: Number, dark: Boolean };
connect() { this.updateDisplay(); }
increment() { this.countValue++; this.updateDisplay(); }
decrement() { this.countValue--; this.updateDisplay(); }
reset() { this.countValue = 0; this.updateDisplay(); }
toggleTheme() { this.darkValue = !this.darkValue; this.updateDisplay(); }
updateDisplay() { this.countTarget.textContent = this.countValue; this.element.className = this.darkValue ? 'dark-theme' : 'light-theme'; }
});
</script>
<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>Stimulus-js Language Guide
Stimulus.js is a modest JavaScript framework designed to enhance static HTML by connecting elements to JavaScript controllers. It complements server-rendered HTML, making it ideal for modestly interactive UIs without a heavy frontend framework.
Primary Use Cases
- ▸Server-rendered apps with light JS enhancements
- ▸Rails and Turbo/Hotwire projects
- ▸Interactive form behaviors
- ▸Small UI widgets
- ▸Progressive enhancement without SPA complexity
Notable Features
- ▸Controller-based architecture
- ▸HTML-driven declarative data bindings
- ▸Lightweight (~3 KB gzipped)
- ▸Easy integration with existing markup
- ▸Automatic event handling via data attributes
Origin & Creator
Created by Basecamp (David Heinemeier Hansson and team) and first released in 2016.
Industrial Note
Stimulus is perfect for server-rendered applications that need modest interactivity, like Rails apps, Turbo-driven frontends, and progressive enhancement use-cases.
Quick Explain
- ▸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.
Core Features
- ▸Stimulus.Controller
- ▸Targets for DOM elements
- ▸Actions for events
- ▸Values for reactive state
- ▸Lifecycle callbacks
Learning Path
- ▸Understand controller, target, and action concepts
- ▸Learn lifecycle callbacks
- ▸Use values for reactive state
- ▸Integrate with Turbo frames and streams
- ▸Build small interactive widgets
Practical Examples
- ▸Expandable/collapsible UI panels
- ▸Dynamic form validation
- ▸Carousel/slider interactions
- ▸Live search filtering
- ▸Turbo-driven content updates
Comparisons
- ▸Lighter than React/Vue
- ▸More declarative than jQuery alone
- ▸Focused on server-rendered HTML
- ▸No SPA abstractions
- ▸Complementary to Turbo/Hotwire
Strengths
- ▸Extremely lightweight and fast
- ▸Non-intrusive - enhances existing HTML
- ▸Great for progressive enhancement
- ▸Easy learning curve
- ▸Excellent integration with Rails/Hotwire
Limitations
- ▸Not a full SPA framework
- ▸No built-in routing or state management
- ▸Limited for large-scale applications
- ▸Requires manual structuring for complex interactions
- ▸Smaller ecosystem compared to React/Vue
When NOT to Use
- ▸Large-scale SPAs
- ▸Apps needing client-side routing
- ▸Complex state management
- ▸Real-time dashboards
- ▸Heavy JS-driven interactions
Cheat Sheet
- ▸`Controller` - base class for behavior
- ▸`static targets` - DOM element references
- ▸`data-action` - bind events
- ▸`values` - reactive state
- ▸`connect()` - called when controller attaches
FAQ
- ▸Is Stimulus a SPA framework?
- ▸No, it enhances static HTML pages.
- ▸Does Stimulus replace jQuery?
- ▸Not strictly, but it provides modern declarative behavior.
- ▸Is Stimulus lightweight?
- ▸Yes - about 3 KB gzipped.
- ▸Can Stimulus work with Rails?
- ▸Yes, it integrates tightly with Turbo/Hotwire.
- ▸Does Stimulus support TypeScript?
- ▸Yes, official typings exist.
30-Day Skill Plan
- ▸Week 1: Basic controller setup
- ▸Week 2: Targets & actions
- ▸Week 3: Values & lifecycle callbacks
- ▸Week 4: Turbo integration
- ▸Week 5: Advanced inter-controller communication
Final Summary
- ▸Stimulus.js is a lightweight framework to enhance HTML with behavior.
- ▸Controller-based architecture keeps JS organized and declarative.
- ▸It excels in server-rendered apps with minimal JS overhead.
- ▸Perfect for Rails, Turbo, and progressive enhancement.
- ▸Allows interactive UIs without full SPA complexity.
Project Structure
- ▸controllers/ - Stimulus controllers
- ▸index.js - entry point & app initialization
- ▸views/ - HTML templates
- ▸assets/ - CSS & JS assets
- ▸public/ - static files
Monetization
- ▸Rails-based SaaS dashboards
- ▸Admin panel templates
- ▸Stimulus plugin development
- ▸Legacy app maintenance
- ▸UI component kits
Productivity Tips
- ▸Use `data-action` consistently
- ▸Keep controllers small and focused
- ▸Leverage values for reactive data
- ▸Combine with Turbo frames for dynamic updates
- ▸Document controller responsibilities
Basic Concepts
- ▸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