Learn ALPINE-JS with Real Code Examples

<div x-data="{ count: 0, isDark: false }" :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: <span x-text="count"></span></h2>
    <div>
        <button @click="count++">+</button>
        <button @click="count--">-</button>
        <button @click="count=0">Reset</button>
    </div>
    <button @click="isDark = !isDark">Switch to <span x-text="isDark ? 'Light' : 'Dark'"></span> Theme</button>
</div>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Simple counter with increment, decrement, reset, and theme toggle using Alpine.js.

<div x-data="{
    count: parseInt(localStorage.getItem('count')) || 0,
    isDark: localStorage.getItem('isDark') === 'true',
    update() {
        localStorage.setItem('count', this.count);
        localStorage.setItem('isDark', this.isDark);
    }
}" :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: <span x-text="count"></span></h2>
    <div>
        <button @click="count++; update()">+</button>
        <button @click="count--; update()">-</button>
        <button @click="count=0; update()">Reset</button>
    </div>
    <button @click="isDark = !isDark; update()">Switch to <span x-text="isDark ? 'Light' : 'Dark'"></span> Theme</button>
</div>

Persists counter and theme state in localStorage.

<div x-data="{ count: 0, max: 10 }">
    <h2>Counter: <span x-text="count"></span></h2>
    <div>
        <button @click="if(count < max) count++">+</button>
        <button @click="count--">-</button>
        <button @click="count=0">Reset</button>
    </div>
</div>

Limits the counter to a maximum value using Alpine.js.

<div x-data="{ count: 0 }">
    <h2>Counter: <span x-text="count"></span> (<span x-text="count % 2 === 0 ? 'Even' : 'Odd'"></span>)</h2>
    <button @click="count++">+</button>
    <button @click="count--">-</button>
</div>

Displays whether the counter is even or odd.

<div x-data="{ count: 0, isDark: false }" :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: <span x-text="count"></span></h2>
    <button @click="count++; if(count > 5) isDark = true">+</button>
    <button @click="count--; if(count <= 5) isDark = false">-</button>
</div>

Automatically switches to dark theme when counter exceeds 5.

<div x-data="{ count:0, history: [] }">
    <h2>Counter: <span x-text="count"></span></h2>
    <div>
        <button @click="count++; history.push(count)">+</button>
        <button @click="count--; history.push(count)">-</button>
        <button @click="count=0; history=[]">Reset</button>
    </div>
    <ul>
        <template x-for="n in history" :key="n">
        <li x-text="n"></li>
        </template>
    </ul>
</div>

Maintains a history of counter changes and resets history on reset.

<div x-data="{ count: 0 }">
    <h2>Counter:</h2>
    <input type='number' x-model.number='count'>
    <button @click='count++'>+</button>
    <button @click='count--'>-</button>
</div>

Binds counter value to an input element for manual edits.

<div x-data="{ isDark: false }" :class="isDark ? 'dark-theme' : 'light-theme'" x-transition>
    <button @click="isDark = !isDark">Toggle Theme</button>
</div>

<style>
.dark-theme { background-color:#222; color:#eee; transition: all 0.3s; }
.light-theme { background-color:#fff; color:#000; transition: all 0.3s; }
</style>

Toggles dark/light theme with a smooth transition animation.

<div x-data="{ count: 0, min: 0, max: 10 }">
    <h2>Counter: <span x-text="count"></span></h2>
    <button @click="if(count < max) count++">+</button>
    <button @click="if(count > min) count--">-</button>
    <button @click="count=0">Reset</button>
</div>

Limits counter between a min and max value.

<div x-data="{ count: 0 }">
    <h2>Counter: <span x-text="count"></span></h2>
    <p x-show="count >= 5">High count reached!</p>
    <button @click="count++">+</button>
    <button @click="count--">-</button>
    <button @click="count=0">Reset</button>
</div>

Shows a message when counter reaches a specific value.