Skip to content

Why I use Alpine.js



Alpine.js is a great little library to add “JavaScript sprinkles of interactivity”.

That’s what JavaScript was created for in the first place: add more life to HTML pages (rather than, for example, run in the browser an entire application framework used to render HTML).

Alpine is concerned with the client-side state, with tiny little bits of JS.

For example tracking the value of an input box, or opening a modal, etc.

You could also just use “vanilla” JavaScript DOM APIs for this, but for some things, Alpine simplifies a lot our job.

I like this a lot paired with server-side HTML generation using Astro, and client-server interactions handled through htmx. Alpine is the perfect fit for this stack.

But why do I use it?

Let me answer with practical examples of how I used it to solve problems.

One need I had was to close a modal defined in a dialog tag when I clicked outside of it.

Using vanilla JavaScript you’d have to do something like this:

function onClickOutside(element, callback) {
  document.addEventListener('click', (event) => {
    if (!element.contains( {
  }, true)

const targetElement = document.querySelector('#yourElementId')

onClickOutside(targetElement, () => {

You need to also come up with a good id name for your element, and think where to put this JavaScript.

With Alpine.js, all this JavaScript can be turned into 1 line you put directly on the element:


It’s much less code, it’s declarative, I don’t have to create an id I’ll use just for this, and the logic is local to the HTML element involved (LoB = Locality of Behavior).

Another example is showing/hiding a mobile menu when pressing a “hamburger” icon, kinda typical pattern.

With Alpine you define a showMenu var on a container element.

I’ll simulate the hamburger icon with a show/hide button.

  x-data='{showMenu : false}'>
	  @click='showMenu = !showMenu'>
  <div x-show='showMenu'>
    ...the menu
  ...the rest of your app

Click the button to show the menu content, click again to hide it.

Those were just 2 simple examples, but I hope you got the gist.

  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)