Learn Stimulus-js - 9 Code Examples & CST Typing Practice Test

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.

View all 9 Stimulus-js code examples →

Stimulus.js Counter Controller Stimulus.js Counter with Step Increment Stimulus.js Counter with Max Limit Stimulus.js Counter with Auto-Reset Stimulus.js Counter with History Stimulus.js Counter with Dark Mode Only Stimulus.js Counter with Auto-Increment Stimulus.js Counter with Conditional Theme Stimulus.js Full Featured Counter

Learn STIMULUS-JS with Real Code Examples

Updated Nov 22, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Stimulus.js Counter Controller

<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>

Basic counter using Stimulus.js with dark/light theme toggle.

Let’s Try →

Stimulus.js Counter with Step Increment

<div data-controller="counter" data-counter-count-value="0" data-counter-step-value="2">
    <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>
</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, step: Number };
        connect() { this.updateDisplay(); }
        increment() { this.countValue += this.stepValue; this.updateDisplay(); }
        decrement() { this.countValue -= this.stepValue; this.updateDisplay(); }
        reset() { this.countValue = 0; this.updateDisplay(); }
        updateDisplay() { this.countTarget.textContent = this.countValue; }
    });
</script>

Counter increments/decrements by a specified step value.

Let’s Try →

Stimulus.js Counter with Max Limit

<div data-controller="counter" data-counter-count-value="0" data-counter-max-value="5">
    <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>
</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, max: Number };
        connect() { this.updateDisplay(); }
        increment() { if(this.countValue < this.maxValue) this.countValue++; this.updateDisplay(); }
        decrement() { this.countValue--; this.updateDisplay(); }
        reset() { this.countValue = 0; this.updateDisplay(); }
        updateDisplay() { this.countTarget.textContent = this.countValue; }
    });
</script>

Stops incrementing after a maximum count is reached.

Let’s Try →

Stimulus.js Counter with Auto-Reset

<div data-controller="counter" data-counter-count-value="0" data-counter-threshold-value="10">
    <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>
</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, threshold: Number };
        connect() { this.updateDisplay(); }
        increment() { this.countValue = (this.countValue + 1 > this.thresholdValue) ? 0 : this.countValue + 1; this.updateDisplay(); }
        decrement() { this.countValue--; this.updateDisplay(); }
        reset() { this.countValue = 0; this.updateDisplay(); }
        updateDisplay() { this.countTarget.textContent = this.countValue; }
    });
</script>

Automatically resets when counter exceeds threshold.

Let’s Try →

Stimulus.js Counter with History

<div data-controller="counter" data-counter-count-value="0">
    <h2>Counter: <span data-counter-target="count">0</span></h2>
    <div>History: <span data-counter-target="history"></span></div>
    <div>
        <button data-action="click->counter#increment">+</button>
        <button data-action="click->counter#decrement">-</button>
        <button data-action="click->counter#reset">Reset</button>
    </div>
</div>
<script>
    import { Application } from '@hotwired/stimulus';
    const application = Application.start();
    application.register('counter', class extends Stimulus.Controller {
        static targets = ['count', 'history'];
        static values = { count: Number };
        history = [];
        connect() { this.updateDisplay(); }
        increment() { this.countValue++; this.history.push('Increment'); this.updateDisplay(); }
        decrement() { this.countValue--; this.history.push('Decrement'); this.updateDisplay(); }
        reset() { this.countValue=0; this.history.push('Reset'); this.updateDisplay(); }
        updateDisplay() { this.countTarget.textContent=this.countValue; this.historyTarget.textContent=this.history.join(', '); }
    });
</script>

Tracks increment/decrement history.

Let’s Try →

Stimulus.js Counter with Dark Mode Only

<div data-controller="counter" data-counter-dark-value="false">
    <h2>Counter: 0</h2>
    <button data-action="click->counter#toggleTheme">Toggle Theme</button>
</div>
<script>
    import { Application } from '@hotwired/stimulus';
    const application = Application.start();
    application.register('counter', class extends Stimulus.Controller {
        static values = { dark: Boolean };
        connect() {}
        toggleTheme() { this.darkValue = !this.darkValue; this.element.className = this.darkValue ? 'dark-theme' : 'light-theme'; }
    });
</script>
<style>.dark-theme{background:#222;color:#eee}.light-theme{background:#fff;color:#000}</style>

Static counter with only dark/light theme toggle.

Let’s Try →

Stimulus.js Counter with Auto-Increment

<div data-controller="counter" data-counter-count-value="0">
    <h2>Counter: <span data-counter-target="count">0</span></h2>
</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 };
        connect() { this.interval = setInterval(()=>{ this.countValue++; this.updateDisplay(); },1000); }
        disconnectedCallback() { clearInterval(this.interval); }
        updateDisplay() { this.countTarget.textContent = this.countValue; }
    });
</script>

Automatically increments counter every second.

Let’s Try →

Stimulus.js Counter with Conditional Theme

<div data-controller="counter" data-counter-count-value="0">
    <h2>Counter: <span data-counter-target="count">0</span></h2>
    <button data-action="click->counter#increment">+</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 };
        connect() { this.updateDisplay(); }
        increment() { this.countValue++; this.updateDisplay(); }
        updateDisplay() { this.element.className = (this.countValue%2===0) ? 'dark-theme' : 'light-theme'; this.countTarget.textContent=this.countValue; }
    });
</script>
<style>.dark-theme{background:#222;color:#eee}.light-theme{background:#fff;color:#000}</style>

Theme changes automatically based on even/odd counter value.

Let’s Try →

Stimulus.js Full Featured Counter

<div data-controller="counter" data-counter-count-value="0" data-counter-dark-value="false" data-counter-step-value="2" data-counter-max-value="10">
    <h2>Counter: <span data-counter-target="count">0</span></h2>
    <div>History: <span data-counter-target="history"></span></div>
    <div>
        <button data-action="click->counter#increment">+</button>
        <button data-action="click->counter#decrement">-</button>
        <button data-action="click->counter#reset">Reset</button>
        <button data-action="click->counter#toggleTheme">Toggle Theme</button>
    </div>
</div>
<script>
    import { Application } from '@hotwired/stimulus';
    const application = Application.start();
    application.register('counter', class extends Stimulus.Controller {
        static targets = ['count','history'];
        static values = { count:Number,dark:Boolean,step:Number,max:Number };
        history=[];
        connect(){ this.interval=setInterval(()=>{ let c=this.countValue+this.stepValue; if(c>this.maxValue)c=0; this.countValue=c; this.history=[...this.history,'Auto Increment']; this.updateDisplay(); },1000); this.updateDisplay();}
        disconnectedCallback(){clearInterval(this.interval);}
        increment(){ this.countValue+=this.stepValue; this.history=[...this.history,'Increment']; this.updateDisplay(); }
        decrement(){ this.countValue-=this.stepValue; this.history=[...this.history,'Decrement']; this.updateDisplay(); }
        reset(){ this.countValue=0; this.history=[...this.history,'Reset']; this.updateDisplay(); }
        toggleTheme(){ this.darkValue=!this.darkValue; this.updateDisplay(); }
        updateDisplay(){ this.countTarget.textContent=this.countValue; this.historyTarget.textContent=this.history.join(', '); this.element.className=this.darkValue?'dark-theme':'light-theme';}
    });
</script>
<style>.dark-theme{background:#222;color:#eee}.light-theme{background:#fff;color:#000}</style>

Combines step increment, max limit, auto-reset, history, auto-increment, and theme toggle.

Let’s Try →

Frequently Asked Questions about Stimulus-js

What is Stimulus-js?

What are the primary use cases for Stimulus-js?

Server-rendered apps with light JS enhancements. Rails and Turbo/Hotwire projects. Interactive form behaviors. Small UI widgets. Progressive enhancement without SPA complexity

What are the strengths of Stimulus-js?

Extremely lightweight and fast. Non-intrusive - enhances existing HTML. Great for progressive enhancement. Easy learning curve. Excellent integration with Rails/Hotwire

What are the limitations of Stimulus-js?

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

How can I practice Stimulus-js typing speed?

CodeSpeedTest offers 9+ real Stimulus-js code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Stimulus.js Counter Controller

<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>

Basic counter using Stimulus.js with dark/light theme toggle.

Let’s Try →

Stimulus.js Counter with Step Increment

<div data-controller="counter" data-counter-count-value="0" data-counter-step-value="2">
    <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>
</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, step: Number };
        connect() { this.updateDisplay(); }
        increment() { this.countValue += this.stepValue; this.updateDisplay(); }
        decrement() { this.countValue -= this.stepValue; this.updateDisplay(); }
        reset() { this.countValue = 0; this.updateDisplay(); }
        updateDisplay() { this.countTarget.textContent = this.countValue; }
    });
</script>

Counter increments/decrements by a specified step value.

Let’s Try →

Stimulus.js Counter with Max Limit

<div data-controller="counter" data-counter-count-value="0" data-counter-max-value="5">
    <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>
</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, max: Number };
        connect() { this.updateDisplay(); }
        increment() { if(this.countValue < this.maxValue) this.countValue++; this.updateDisplay(); }
        decrement() { this.countValue--; this.updateDisplay(); }
        reset() { this.countValue = 0; this.updateDisplay(); }
        updateDisplay() { this.countTarget.textContent = this.countValue; }
    });
</script>

Stops incrementing after a maximum count is reached.

Let’s Try →

Stimulus.js Counter with Auto-Reset

<div data-controller="counter" data-counter-count-value="0" data-counter-threshold-value="10">
    <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>
</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, threshold: Number };
        connect() { this.updateDisplay(); }
        increment() { this.countValue = (this.countValue + 1 > this.thresholdValue) ? 0 : this.countValue + 1; this.updateDisplay(); }
        decrement() { this.countValue--; this.updateDisplay(); }
        reset() { this.countValue = 0; this.updateDisplay(); }
        updateDisplay() { this.countTarget.textContent = this.countValue; }
    });
</script>

Automatically resets when counter exceeds threshold.

Let’s Try →

Stimulus.js Counter with History

<div data-controller="counter" data-counter-count-value="0">
    <h2>Counter: <span data-counter-target="count">0</span></h2>
    <div>History: <span data-counter-target="history"></span></div>
    <div>
        <button data-action="click->counter#increment">+</button>
        <button data-action="click->counter#decrement">-</button>
        <button data-action="click->counter#reset">Reset</button>
    </div>
</div>
<script>
    import { Application } from '@hotwired/stimulus';
    const application = Application.start();
    application.register('counter', class extends Stimulus.Controller {
        static targets = ['count', 'history'];
        static values = { count: Number };
        history = [];
        connect() { this.updateDisplay(); }
        increment() { this.countValue++; this.history.push('Increment'); this.updateDisplay(); }
        decrement() { this.countValue--; this.history.push('Decrement'); this.updateDisplay(); }
        reset() { this.countValue=0; this.history.push('Reset'); this.updateDisplay(); }
        updateDisplay() { this.countTarget.textContent=this.countValue; this.historyTarget.textContent=this.history.join(', '); }
    });
</script>

Tracks increment/decrement history.

Let’s Try →

Stimulus.js Counter with Dark Mode Only

<div data-controller="counter" data-counter-dark-value="false">
    <h2>Counter: 0</h2>
    <button data-action="click->counter#toggleTheme">Toggle Theme</button>
</div>
<script>
    import { Application } from '@hotwired/stimulus';
    const application = Application.start();
    application.register('counter', class extends Stimulus.Controller {
        static values = { dark: Boolean };
        connect() {}
        toggleTheme() { this.darkValue = !this.darkValue; this.element.className = this.darkValue ? 'dark-theme' : 'light-theme'; }
    });
</script>
<style>.dark-theme{background:#222;color:#eee}.light-theme{background:#fff;color:#000}</style>

Static counter with only dark/light theme toggle.

Let’s Try →

Stimulus.js Counter with Auto-Increment

<div data-controller="counter" data-counter-count-value="0">
    <h2>Counter: <span data-counter-target="count">0</span></h2>
</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 };
        connect() { this.interval = setInterval(()=>{ this.countValue++; this.updateDisplay(); },1000); }
        disconnectedCallback() { clearInterval(this.interval); }
        updateDisplay() { this.countTarget.textContent = this.countValue; }
    });
</script>

Automatically increments counter every second.

Let’s Try →

Stimulus.js Counter with Conditional Theme

<div data-controller="counter" data-counter-count-value="0">
    <h2>Counter: <span data-counter-target="count">0</span></h2>
    <button data-action="click->counter#increment">+</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 };
        connect() { this.updateDisplay(); }
        increment() { this.countValue++; this.updateDisplay(); }
        updateDisplay() { this.element.className = (this.countValue%2===0) ? 'dark-theme' : 'light-theme'; this.countTarget.textContent=this.countValue; }
    });
</script>
<style>.dark-theme{background:#222;color:#eee}.light-theme{background:#fff;color:#000}</style>

Theme changes automatically based on even/odd counter value.

Let’s Try →

Stimulus.js Full Featured Counter

<div data-controller="counter" data-counter-count-value="0" data-counter-dark-value="false" data-counter-step-value="2" data-counter-max-value="10">
    <h2>Counter: <span data-counter-target="count">0</span></h2>
    <div>History: <span data-counter-target="history"></span></div>
    <div>
        <button data-action="click->counter#increment">+</button>
        <button data-action="click->counter#decrement">-</button>
        <button data-action="click->counter#reset">Reset</button>
        <button data-action="click->counter#toggleTheme">Toggle Theme</button>
    </div>
</div>
<script>
    import { Application } from '@hotwired/stimulus';
    const application = Application.start();
    application.register('counter', class extends Stimulus.Controller {
        static targets = ['count','history'];
        static values = { count:Number,dark:Boolean,step:Number,max:Number };
        history=[];
        connect(){ this.interval=setInterval(()=>{ let c=this.countValue+this.stepValue; if(c>this.maxValue)c=0; this.countValue=c; this.history=[...this.history,'Auto Increment']; this.updateDisplay(); },1000); this.updateDisplay();}
        disconnectedCallback(){clearInterval(this.interval);}
        increment(){ this.countValue+=this.stepValue; this.history=[...this.history,'Increment']; this.updateDisplay(); }
        decrement(){ this.countValue-=this.stepValue; this.history=[...this.history,'Decrement']; this.updateDisplay(); }
        reset(){ this.countValue=0; this.history=[...this.history,'Reset']; this.updateDisplay(); }
        toggleTheme(){ this.darkValue=!this.darkValue; this.updateDisplay(); }
        updateDisplay(){ this.countTarget.textContent=this.countValue; this.historyTarget.textContent=this.history.join(', '); this.element.className=this.darkValue?'dark-theme':'light-theme';}
    });
</script>
<style>.dark-theme{background:#222;color:#eee}.light-theme{background:#fff;color:#000}</style>

Combines step increment, max limit, auto-reset, history, auto-increment, and theme toggle.

Let’s Try →

Frequently Asked Questions about Stimulus-js

What is Stimulus-js?

What are the primary use cases for Stimulus-js?

Server-rendered apps with light JS enhancements. Rails and Turbo/Hotwire projects. Interactive form behaviors. Small UI widgets. Progressive enhancement without SPA complexity

What are the strengths of Stimulus-js?

Extremely lightweight and fast. Non-intrusive - enhances existing HTML. Great for progressive enhancement. Easy learning curve. Excellent integration with Rails/Hotwire

What are the limitations of Stimulus-js?

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

How can I practice Stimulus-js typing speed?

CodeSpeedTest offers 9+ real Stimulus-js code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.