Alpine.js for Beginners

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.