Back to Home
Alpine.js logoAlpine.js BEGINNER

Alpine.js

Lightweight JavaScript framework for building interactive UIs with declarative syntax

6 min read
alpinejsjavascriptfrontendreactivedirectivesuiframeworklightweight

Getting Started

Installation & Setup

Add Alpine.js to your project via CDN or npm

📄 Codehtml
✅ Use defer attribute to ensure Alpine loads after DOM
💡 CDN is perfect for prototyping and small projects
🔍 NPM install gives you more control and build optimization
⚡ Minified CDN version is only ~15KB gzipped
installationsetupcdnnpm

x-data - Component State

Define reactive data for your Alpine component

html
✅ x-data creates a new Alpine component scope
💡 All child elements can access the reactive data
🔍 Use functions for reusable component logic
⚡ Changes to data automatically update the DOM
x-datastatereactivecomponent

Directives - Data Display

x-text - Display Text

Set text content of an element reactively

html
✅ x-text sets innerText, automatically escaping HTML
💡 Safer than x-html for user-generated content
🔍 Supports any JavaScript expression
⚡ Updates automatically when data changes
x-textdata-bindingdisplay

x-html - Render HTML

Set HTML content of an element

html
⚠️ Only use x-html with trusted content - XSS risk
💡 Prefer x-text unless you specifically need HTML
✅ Useful for rendering rich content from CMS
🔍 Sets innerHTML, so all HTML tags are parsed
x-htmlhtmlrendersecurity

x-show - Toggle Visibility

Show or hide elements based on conditions

html
✅ Uses CSS display property (element stays in DOM)
💡 Better for frequently toggled content than x-if
🔍 Combine with x-transition for smooth animations
⚡ Element is hidden but still rendered in HTML
x-showvisibilitytoggleconditional

Directives - User Interaction

x-on - Event Listeners

Attach event listeners to elements (shorthand: @)

html
✅ @ is shorthand for x-on: (use @ for cleaner code)
💡 Modifiers like .prevent, .stop work like Vue.js
🔍 Access event object with $event magic property
⚡ Built-in modifiers: .debounce, .throttle, .once, .outside
x-oneventsclicklisteners@

x-model - Two-Way Binding

Bind form inputs to data with automatic sync

html
✅ Two-way binding: input changes update data and vice versa
💡 Works with text, checkbox, radio, select elements
🔍 Modifiers: .lazy (on change), .number, .debounce
⚡ Automatically handles different input types correctly
x-modelformsbindinginput

x-bind - Bind Attributes

Dynamically bind HTML attributes (shorthand: :)

html
✅ : is shorthand for x-bind: (use : for cleaner code)
💡 Class binding accepts object syntax for multiple classes
🔍 Can bind any HTML attribute: href, src, disabled, etc.
⚡ Use x-bind (no attribute) to spread multiple attributes
x-bindattributesclassstyle:

Directives - Control Flow

x-if - Conditional Rendering

Conditionally add/remove elements from DOM

html
✅ Must be used on <template> tag
💡 Completely removes element from DOM when false
🔍 Use for expensive components that rarely show
⚡ x-show is better for frequently toggled content
x-ifconditionaltemplaterendering

x-for - Loop & Lists

Render lists of elements from arrays

html
✅ Must be used on <template> tag
💡 Always provide :key for optimal performance
🔍 Access index with (item, index) in items syntax
⚡ Automatically updates when array changes
x-forlooplistsiterationtemplate

Advanced Features

x-ref - Element References

Reference DOM elements within your component

html
✅ Access elements via $refs magic property
💡 No need for getElementById or querySelector
🔍 Scoped to component - no global pollution
⚡ Useful for focusing inputs, measuring elements, etc.
x-refrefsdomelements

x-transition - Animations

Add smooth transitions when elements appear/disappear

html
✅ Works seamlessly with x-show and x-if
💡 Default transition is a simple fade
🔍 Modifiers: .opacity, .scale, .duration.XXXms
⚡ Use detailed classes for complete control over animation
x-transitionanimationstransitionseffects

$el & $refs - Magic Properties

Access special Alpine.js magic properties

html
✅ $el references the current component root element
💡 $refs accesses all elements with x-ref
🔍 Other magic: $watch, $dispatch, $nextTick, $store
⚡ Use $ prefix for all Alpine magic properties
magic-properties$el$refs$watch$dispatch

x-cloak - Hide Uninitialized

Prevent flash of unstyled content before Alpine loads

html
✅ Prevents template syntax from showing before Alpine loads
💡 Add CSS rule [x-cloak] { display: none !important; }
🔍 Alpine removes x-cloak attribute when initialized
⚡ Essential for production to avoid flickering
x-cloakloadingfoucinitialization