Alpine.js Cheat Sheet

A quick reference for Alpine.js directives like x-data, x-show, and x-for, plus magic properties for lightweight interactivity.

1 PageBeginnerMar 8, 2026

x-data & Basic Directives

Declaring component state and binding it to the DOM.

html

<div x-data="{ open: false, count: 0 }">  <button @click="open = !open">Toggle</button>  <div x-show="open">Content</div>  <button @click="count++">Increment</button>  <span x-text="count"></span></div>

Loops & Conditionals

Rendering lists and toggling elements in and out of the DOM.

html

<ul x-data="{ items: ['a', 'b', 'c'] }">  <template x-for="(item, index) in items" :key="index">    <li x-text="item"></li>  </template></ul><template x-if="loggedIn">  <p>Welcome back!</p></template>

Core Directives

The attributes Alpine reads to add behavior to plain HTML.

x-data- declares a component's reactive state as a plain JS object
x-show- toggles CSS display based on an expression; the element stays in the DOM
x-if- adds/removes the element from the DOM entirely; must wrap a <template> tag
x-model- two-way binds a form input to a piece of x-data state
x-bind (:attr)- dynamically binds an HTML attribute to an expression
x-on (@event)- attaches an event listener that runs an expression
x-text / x-html- sets an element's text content or innerHTML from an expression
x-transition- applies CSS transition classes when an element toggles via x-show/x-if

Magic Properties

Built-in helpers available inside any Alpine expression.

html

<div x-data="{ open: false }" @click.outside="open = false">  <button @click="open = true" x-ref="trigger">Open</button>  <div x-show="open" x-init="$watch('open', value => console.log('open changed', value))">    <input x-init="$el.focus()" />  </div></div><!-- $el: current element, $refs: named elements via x-ref, $watch: observe a value -->

Pro Tip

Alpine re-evaluates expressions reactively but does not diff a virtual DOM -- keep x-data state small and colocated on the element it controls, and only lift it to a shared ancestor when multiple children genuinely need the same state.

Was this cheat sheet helpful?

Backbone.js Cheat Sheet

htmx Cheat Sheet