Introduction to Alpine.js: The Minimal JavaScript Framework

What is Alpine.js?

Alpine.js is a rugged, minimal tool for composing behavior directly in your HTML. Think of it as Tailwind for JavaScript – small, declarative, and incredibly powerful.

Getting Started

Just include the CDN link:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

Core Concepts

• x-data: Declare reactive data
• x-bind: Bind attributes to data
• x-on: Listen to events
• x-show/x-if: Conditional rendering
• x-for: Loop through data

Example: Toggle Menu

<div x-data="{ open: false }">
    <button @click="open = !open">Toggle</button>
    <div x-show="open">Menu Content</div>
</div>

Alpine.js is perfect for adding interactivity to server-rendered pages. I use it extensively in my PHP projects!