Learn STIMULUS-JS with Real Code Examples

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

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

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

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

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

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

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

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

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