Alpine.js Documentation

Getting Started

Install Alpine.js in your project using one of the following methods:

CDN (Recommended)

<script src="https://unpkg.com/alpinejs" defer></script>

NPM

npm install alpinejs

Directives Quick Reference

x-data

Declares reactive JavaScript object on an element. Acts as the component's state.

<div x-data="{ count: 0 }">
<button x-on:click="count++">Increment</button>
<span x-text="count"></span>
</div>

x-on

Attaches event listeners to DOM elements for Alpine.js expressions.

<button x-data="{ open: false }"
        x-on:click="open = !open">
    Toggle
</button>

x-show

Conditionally shows/hides elements based on reactive expressions.

<div x-data="{ showContent: true }">
<button x-on:click="showContent = !showContent">Toggle</button>
<div x-show="showContent">
    This content toggles visibility.
</div>
</div>

x-bind

Reactivity for DOM properties, classes, attributes, and styles.

<div x-data="{ isActive: true }">
<button x-bind:class="{ 'bg-blue-500 text-white': isActive }">Dynamic Class</button>
</div>

x-model

Cross-directional data binding for form elements like inputs and selects.

<div x-data="{ name: 'Alpine' }">
    <input x-model="name" placeholder="Enter your name" />
    <span x-text="name"></span>
</div>

x-class

Conditionally apply classes using Alpine's reactive expressions.

<div x-data="{ isPrimary: true }">
    <button x-class="{ 'bg-blue-500 text-white': isPrimary }">
        Primary Button
    </button>
</div>

Advanced Features

Transitions & Animations

Seamlessly animate elements showing/hiding with Alpine's built-in animation system.

<div x-data="{ open: false }">
<button @click="open = !open">Open</button>
<div x-show.transition.out="open">Animated</div>
</div>

Reactive Data Watchers

Trigger logic when specific reactive properties change using $watch()

<div x-data="{ 
    count: 0,
    init() {
        this.$watch('count', value => {
            console.log('Count changed to', value);
        });
    }
}">
<button @click="count++">Increment</button>
<span x-text="count"></span>
</div>

Form Validation

Native HTML form validation combined with Alpine expressions

<form x-data="{ email: '', errors: {} }">
    <input type="email" x-model="email" required>
    <template x-if="!email.endsWith('@example.com')">
        <div class="text-red-500 text-xs mt-1">
            <span>Please provide a valid email</span>
        </div>
    </template>
</form>

Magic Properties

Access special Alpine properties in your reactive expressions

<div x-data="{ name: 'Alpine' }">
    <p>Initialized at: @elapsed</p>
    <p>Memory ID: $id('my-component')</p>
</div>

Effect Loops

Maintain side effects as data changes with Alpine's reactive system

<div x-data="{ count: 0 }">
    <p>Count: @count</p>
    <template x-effect="{ 
        document.title = `Counter: ${count}`
    }"></template>
    <button @click="count++">Increment</button>
</div>

Component API

Use Alpine's API to create reusable components programmatically

document.addEventListener('alpine:init', () => {
    Alpine.data('myComponent', () => ({
        message: 'Hello from Alpine',
        show: false,
        init() {
            this.show = true;
        }
    }));
});
// In HTML:
<div x-data="myComponent()">
    <p x-show="show">{{ message }}</p>
</div>

Reactive UI Demo

Theme Toggle

This interactive demo uses Alpine.js directly in your browser. Toggle the theme switch or click the button to see reactivity in action!