# The Alpine.js Guide

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

Author: Flavio Copes | Published: 2026-07-14 | Canonical: https://flaviocopes.com/alpine/

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:

```html
<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](https://flaviocopes.com/astro/) and [the htmx guide](https://flaviocopes.com/htmx/).

## Go deeper

I wrote a free ebook that covers Alpine from the ground up: the [Alpine.js Handbook](https://flaviocopes.com/ebooks/alpine-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](https://flaviocopes.com/courses/aha-stack) 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](https://flaviocopes.com/tags/alpine/).