learn alpine.js free
Your complete, free reference to Alpine.js. Learn every directive, magic property, plugin, and advanced technique with clear explanations and live examples – all in one place.
Why Alpine.js?
Alpine.js is the lightweight, declarative JavaScript framework that lets you sprinkle interactivity into your server‑rendered HTML without the complexity of a full SPA. It’s the perfect companion for frameworks like Laravel, Rails, Django, or even plain HTML.
Tiny Footprint
Only ~15kB gzipped. Loads instantly, even on slow networks.
No Build Step Required
Just drop a <script> tag and start sprinkling interactivity. Ideal for server‑rendered apps.
Reactive & Declarative
Write behaviour directly in HTML with directives like x‑data, x‑show, and x‑bind. No complex JavaScript required.
Backend Agnostic
Works with any backend that outputs HTML: Laravel, Rails, Django, PHP, or static sites.
Extensible with Plugins
Official plugins for persistence, masking, focus trapping, intersection, and more. Or write your own.
Perfect Companion to Livewire
Alpine is bundled with Laravel Livewire, giving you a seamless full‑stack reactive experience.
Explore the Documentation
Dive into our detailed guides covering every feature of Alpine.js.
Getting Started
Installation and first steps
x‑data
Component state & reactivity
x‑show
Toggle visibility with ease
x‑model
Two‑way form binding
x‑bind
Dynamic HTML attributes
x‑on
Event handling & modifiers
x‑for
Render lists & loops
x‑if
Conditional rendering
$el
Access the root element
$store
Global state management
Events
Keyboard shortcuts & custom events
Transitions
Animate with x‑transition
Forms
Form handling & validation
Persist
Save state to localStorage
A11y
Build accessible components
v2 → v3
Upgrade guide
Frequently Asked Questions
What is Alpine.js?
Alpine.js is a rugged, minimal JavaScript framework for adding interactivity to your HTML. It’s designed to be dropped into server‑rendered applications, giving you the reactive and declarative power of frameworks like Vue or React at a fraction of the size (~15kB).
Do I need a build step to use Alpine.js?
No! You can simply include a <script> tag via CDN and start using x-data, x-show, and other directives directly in your HTML. That’s why it’s perfect for traditional multi‑page apps.
Is Alpine.js a replacement for Vue or React?
Not exactly. Alpine excels at “sprinkling” interactivity into existing server‑rendered pages. For full single‑page applications, Vue/React may be more suitable. However, for many use‑cases Alpine can handle all the reactivity you need with far less overhead.
Can I use Alpine.js with Laravel Livewire?
Absolutely! Alpine is bundled with Livewire and works seamlessly. You can use Alpine directives inside Livewire components for client‑side interactions that complement Livewire’s server‑side magic.
Where can I find the official Alpine.js plugins?
Official plugins like Persist, Mask, Focus, Intersect, and Collapse are available on npm under the @alpinejs scope. Our documentation covers each one in detail.