Features
- Declarative reactivity directly in HTML attributes
- 15 directives covering most UI patterns
- Tiny footprint (~17kb, no build step needed)
- Magics system for common utilities ($refs, $watch, $dispatch)
- Plugin system for extending functionality
Pros
- Zero build step — add a script tag and go
- Perfect complement to server-rendered HTML
- Trivial learning curve for anyone who knows HTML
Cons
- Not suited for complex single-page applications
- Performance degrades with many reactive bindings
- Limited tooling and devtools compared to larger frameworks
Overview
Alpine.js is a rugged, minimal tool for composing behavior directly in your HTML markup. Think of it as the modern replacement for jQuery — it gives you reactive and declarative capabilities using a simple attribute-based syntax, all without a build step or complex toolchain.
Alpine.js offers 15 attributes, 6 properties, and 2 methods that cover the vast majority of interactive UI needs. Its directives like x-data, x-show, x-bind, and x-on let you sprinkle interactivity into server-rendered pages without rewriting them as single-page applications. It pairs exceptionally well with server-side frameworks like Laravel, Rails, Django, and HTMX.
When to Use
Alpine.js is the right choice when you have server-rendered HTML that needs interactive behavior (dropdowns, modals, tabs, toggles), when you want to avoid a build step, or when the complexity of React/Vue is overkill for your project. It’s the sweet spot between vanilla JS and a full framework.
Getting Started
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
<div x-data="{ count: 0 }">
<button @click="count++">Count: <span x-text="count"></span></button>
</div>