Alpine.js is a rugged, minimal tool for composing behavior directly in your markup. Think of it as Tailwind for JavaScript.
Why Alpine.js?
When you need just a sprinkle of interactivity, reaching for React or Vue might be overkill. Alpine.js fills that gap perfectly.
Key Benefits
- Lightweight - Only ~17kb minified
- No build step - Just drop it in
- Declarative - Write behavior in HTML
- Reactive - Data binding that just works
Getting Started
Add Alpine to your page:
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>Your First Component
<div x-data="{ open: false }">
<button @click="open = !open">Toggle</button>
<div x-show="open">
Hello, Alpine!
</div>
</div>That's it! No configuration, no compilation - just works.
Core Directives
| Directive | Purpose |
|---|---|
x-data | Define reactive data |
x-show | Toggle visibility |
x-if | Conditional rendering |
x-for | Loop through items |
x-bind | Bind attributes |
x-on | Listen to events |
x-model | Two-way binding |
When to Use Alpine
- Dropdowns and modals
- Tabs and accordions
- Form validation
- Simple state management
- Enhancing server-rendered HTML
Alpine.js is perfect when you need interactivity without the overhead of a full framework.