Last Updated: November 21, 2025
Core Directives
x-data="{ count: 0 }"
Declare component scope with reactive data
x-init="fetchData()"
Run code when component initializes
x-show="isOpen"
Toggle display with CSS (keeps element in DOM)
x-if="condition"
Conditionally add/remove element from DOM
x-for="item in items"
Loop through array or object
x-text="message"
Set element's text content
x-html="markup"
Set element's inner HTML
x-bind:class="className"
Bind attribute dynamically (shorthand: :class)
x-on:click="handleClick"
Listen to events (shorthand: @click)
x-model="value"
Two-way data binding for inputs
Event Modifiers
@click.prevent
Call preventDefault() on event
@click.stop
Call stopPropagation() on event
@click.outside
Trigger when clicked outside element
@click.window
Listen to event on window object
@click.document
Listen to event on document
@click.once
Ensure handler only called once
@click.debounce.500ms
Debounce handler (wait 500ms)
@click.throttle.500ms
Throttle handler (max once per 500ms)
@click.self
Only trigger if event target is element itself
@keydown.escape
Listen for specific key press
Magic Properties
$el
Reference to current DOM element
$refs.name
Access element marked with x-ref="name"
$event
Native browser event object
$dispatch('name', data)
Dispatch custom browser event
$watch('prop', callback)
Watch property for changes
$nextTick(callback)
Execute after next DOM update
$store.global
Access global store state
$data
Access component's data object
$id('name')
Generate unique ID scoped to component
$root
Access root element of component
x-bind Modifiers
:class="{ active: isActive }"
Bind class object conditionally
:class="[class1, class2]"
Bind array of classes
:style="{ color: textColor }"
Bind inline styles as object
:disabled="!canSubmit"
Bind boolean attribute
:href="url"
Bind dynamic URL
:src.camel="imageUrl"
Bind with camelCase conversion
x-model Modifiers
x-model.lazy="value"
Update on change instead of input
x-model.number="count"
Convert input to number
x-model.debounce.500ms="search"
Debounce model updates
x-model.throttle.500ms="input"
Throttle model updates
x-model.fill="value"
Fill input with initial server value
Advanced Directives
x-transition
Apply CSS transitions to element
x-transition.opacity
Apply opacity transition helper
x-transition.scale
Apply scale transition helper
x-effect="console.log(value)"
Run code when dependencies change
x-ignore
Prevent Alpine from initializing element
x-ref="name"
Mark element for reference via $refs
x-cloak
Hide element until Alpine initializes
x-teleport="selector"
Move element to another location in DOM
x-modelable="value"
Expose property for parent x-model binding
x-id="['name']"
Generate scoped IDs for accessibility
Global Stores
Alpine.store('name', { data })
Define global store
$store.name.property
Access store property in template
Alpine.store('name').method()
Call store method from JS
Plugins & Extensions
Alpine.plugin(myPlugin)
Register Alpine plugin
Alpine.data('name', () => ({}))
Register reusable component data
Alpine.directive('name', callback)
Create custom directive
Alpine.magic('name', callback)
Create custom magic property
Alpine.start()
Manually start Alpine (if using defer)
💡 Pro Tip:
Alpine.js is perfect for adding interactivity to server-rendered HTML without a build step. Use x-cloak with CSS to prevent flashing of unstyled content!