Learn Alpine-js - 10 Code Examples & CST Typing Practice Test

Alpine.js is a lightweight, declarative JavaScript framework that provides reactivity and interactivity directly in your HTML. It is often described as 'Tailwind for JavaScript' - offering the power of large frameworks with minimal overhead.

View all 10 Alpine-js code examples →

Alpine.js Basic Counter Alpine.js Counter with LocalStorage Alpine.js Counter with Max Limit Alpine.js Counter with Even/Odd Display Alpine.js Counter with Auto Dark Theme Alpine.js Counter with Reset History Alpine.js Counter with Input Binding Alpine.js Counter with Toggle Animation Alpine.js Counter with Max/Min Limits Alpine.js Counter with Conditional Message

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

Alpine.js Basic Counter

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

Let’s Try →

Alpine.js Counter with LocalStorage

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

Let’s Try →

Alpine.js Counter with Max Limit

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

Let’s Try →

Alpine.js Counter with Even/Odd Display

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

Let’s Try →

Alpine.js Counter with Auto Dark Theme

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

Let’s Try →

Alpine.js Counter with Reset History

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

Let’s Try →

Alpine.js Counter with Input Binding

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

Let’s Try →

Alpine.js Counter with Toggle Animation

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

Let’s Try →

Alpine.js Counter with Max/Min Limits

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

Let’s Try →

Alpine.js Counter with Conditional Message

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

Let’s Try →

Frequently Asked Questions about Alpine-js

What is Alpine-js?

What are the primary use cases for Alpine-js?

UI interactivity in server-rendered pages. Toggles, tabs, dropdowns, modals. Form validation and dynamic behavior. Progressive enhancement for static sites. Small-to-medium widgets without frameworks

What are the strengths of Alpine-js?

Very small and fast. Perfect for server-rendered environments. Inline, declarative syntax is easy to adopt. No tooling, bundling, or complex setup. Great for enhancing existing markup

What are the limitations of Alpine-js?

Not ideal for large single-page applications. Limited ecosystem compared to Vue/React. No virtual DOM or heavy component logic. Not suited for extremely complex state management. Less tooling support than modern SPA frameworks

How can I practice Alpine-js typing speed?

CodeSpeedTest offers 10+ real Alpine-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

Alpine.js Basic Counter

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

Let’s Try →

Alpine.js Counter with LocalStorage

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

Let’s Try →

Alpine.js Counter with Max Limit

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

Let’s Try →

Alpine.js Counter with Even/Odd Display

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

Let’s Try →

Alpine.js Counter with Auto Dark Theme

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

Let’s Try →

Alpine.js Counter with Reset History

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

Let’s Try →

Alpine.js Counter with Input Binding

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

Let’s Try →

Alpine.js Counter with Toggle Animation

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

Let’s Try →

Alpine.js Counter with Max/Min Limits

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

Let’s Try →

Alpine.js Counter with Conditional Message

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

Let’s Try →

Frequently Asked Questions about Alpine-js

What is Alpine-js?

What are the primary use cases for Alpine-js?

UI interactivity in server-rendered pages. Toggles, tabs, dropdowns, modals. Form validation and dynamic behavior. Progressive enhancement for static sites. Small-to-medium widgets without frameworks

What are the strengths of Alpine-js?

Very small and fast. Perfect for server-rendered environments. Inline, declarative syntax is easy to adopt. No tooling, bundling, or complex setup. Great for enhancing existing markup

What are the limitations of Alpine-js?

How can I practice Alpine-js typing speed?

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