The Alpine.js Guide

Jul 14, 2026

Alpine.js guide: what Alpine is, why it's great for adding interactivity to server-rendered sites, and how it fits the AHA Stack.

~~~

Alpine.js is a tiny JavaScript framework for adding interactivity directly in your HTML.

You drop a script tag in your page, add a few attributes to your markup, and you have dropdowns, modals, tabs, and forms that react to user input. No build step. No bundler. No component files.

I use Alpine a lot. It’s my go-to tool when a site is mostly server-rendered and just needs sprinkles of interactivity. This page explains why, and where to learn it in depth.

Why Alpine?

Most sites don’t need React. They need a dropdown to open, a form to validate, a counter to update.

Alpine gives you that with a handful of directives. x-data defines state, x-show toggles visibility, x-on handles events, x-text renders values. You write them right in the HTML, next to the elements they control.

Here’s a complete working example:

<div x-data="{ open: false }">
  <button x-on:click="open = !open">Toggle</button>
  <div x-show="open">Hello!</div>
</div>

That’s it. No setup, no compilation.

The mental model is close to what made jQuery popular, but with declarative state instead of manual DOM manipulation. If you know a bit of JavaScript, you can be productive with Alpine in an afternoon.

Alpine in the AHA Stack

Alpine is the “A” at the end of the AHA Stack: Astro, htmx, Alpine.

The idea is simple. Astro renders your pages on the server. htmx handles the communication with the server, swapping HTML fragments without full page reloads. Alpine handles the pure client-side interactions, the things that never need to touch the server.

Together they cover almost everything a modern web app needs, with a fraction of the complexity of an SPA framework.

I wrote guides for the other two parts of the stack too: the Astro guide and the htmx guide.

Go deeper

I wrote a free ebook that covers Alpine from the ground up: the Alpine.js Handbook. It walks through all the directives with practical examples, and you can download it in PDF and EPUB.

If you want to learn the whole approach, the AHA Stack Masterclass is my full course on building complete applications with Astro, htmx, and Alpine. We build a real project from scratch, step by step.

All posts on this topic are in the Alpine tag archive.

Tagged: Alpine.js · All topics

~~~