DOCSEARCHbyAlgolia
Submit Docs

Alpine.js Documentation

website·Indexed Apr 11, 2026

https://alpinejs.dev/

Official documentation for Alpine.js, a lightweight JavaScript framework for simplicity and power. Covers installation via CDN or npm, reactive state management with x-data, and directives including x-bind, x-show, x-for, x-model, x-transition, and x-if. Includes guides on lifecycle hooks, event handling, global stores, and component patterns like modals and dropdowns. Features reference pages for magic properties ($el, $refs, $store, $watch, $dispatch) and upgrade paths from V2 to V3.

Tokens
17.2K
Snippets
113
Records
203
Agent score
50%

What's inside Alpine.js

  1. Monitor component properties with $watch

    The $watch magic method in Alpine.js monitors component properties for changes and executes a callback with the new value. Use it within x-init to set up the watcher when the component initializes.

  2. Alpine UI Components overview

    Alpine UI Components is a paid library of pre-built, production-ready UI elements including modals, dropdowns, tabs, and other common interface components. Each component is designed to be copy-pasted directly into your application, reducing development time spent on re-implementing standard UI patterns.

  3. Set HTML attributes with x-bind

    The x-bind directive sets HTML attributes on elements based on JavaScript expressions. Requires a parent element with x-data defined. Example: <input type="text" x-bind:placeholder="placeholderText">

  4. Resize Plugin Overview

    The Alpine.js Resize plugin wraps the native Resize Observer API to detect when elements change size. Use cases include custom size-based animations, intelligent sticky positioning, and conditionally adding attributes based on element dimensions.

  5. Alpine.js reactivity overview

    Alpine.js is reactive—when you change a piece of data, everything depending on that data automatically updates. Reactivity is powered by two core functions: Alpine.reactive() for creating reactive data, and Alpine.effect() for running code that responds to data changes. Under the hood, Alpine uses VueJS's reactivity engine.

  6. Basic x-transition with x-show

    Use x-transition with x-show to create smooth fade and scale transitions when elements are shown or hidden. Alpine applies pleasant defaults (fade + scale) automatically. The element must be within an x-data scope.

  7. Alpine UI Components Package

    A collection of pre-built, production-ready UI components for Alpine.js including modals, dropdowns, tabs, and more. Components are designed for copy-paste implementation. The package includes in-depth screencasts for each component and is available as a lifetime purchase.

  8. Move template content to another DOM location with x-teleport

    The x-teleport directive moves Alpine template content to a different DOM location using a CSS selector. Attach x-teleport to a <template> element to append its contents to the target selector. This is useful for modals to break out of z-index constraints and render as siblings rather than children.

    <template x-teleport="body"> <div x-show="open">Modal contents...</div> </template>

  9. Alpine UI Components product overview

    Alpine UI Components is a paid collection of pre-built, production-ready UI elements including modals, dropdowns, and tabs. Components can be copied and pasted directly into applications. The product includes in-depth screencasts for every component and costs $49 for lifetime access (originally $99).

  10. Execute code after DOM updates with $nextTick

    $nextTick is a magic property in Alpine.js that executes a given expression AFTER the framework has completed its reactive DOM updates. This is useful when you need to interact with the DOM state AFTER it's reflected any data changes you've made. Without $nextTick, reading DOM properties like $el.innerText would return the pre-update state.

  11. CSP build overview and purpose

    Alpine.js offers a CSP (Content-Security Policy) build that doesn't violate the 'unsafe-eval' directive. The standard Alpine build uses Function declarations (not actual eval()) to execute JavaScript expressions from HTML attributes like x-on:click, which violates 'unsafe-eval'. The CSP build supports most inline expression syntax while maintaining security compliance.

  12. Initialize an Alpine component with x-data

    The x-data directive initializes an Alpine.js component by defining a reactive data scope. It marks a chunk of HTML as an Alpine component and provides reactive data for that component. Basic syntax: <div x-data="{ open: false }">. The data object can contain state properties, methods, and getters that are accessible throughout the component's DOM tree.