It’s great for quickly adding interactivity to any static HTML element.

You can turn any element into an “Alpine component” simply by adding the x-data attribute.

Imagine a drop-down menu like so:

  <div>
    <button>Toggle menu</button>
    <div>
      Menu item 1…
      Menu item 2…
      etc…
    </div>
  </div>

Without JS, everything would be visible at all times.

You’d make this reactive with Alpine like this:

  <div x-data=“menuVisible = false”>
    <button @click=“menuVisible = !menuVisible”>Toggle menu</button>
    <div x-cloak x-show=“menuVisible” x-transition @click.outside=“menuVisible = false”>
      Menu item 1…
      Menu item 2…
      etc…
    </div>
  </div>

When the button is clicked, the menu opens (or closes). x-transition adds a smooth fade effect, @click.outside hides the menu when clicked away from the element, and x-cloak prevents it from appearing before the DOM has fully loaded.

Those are just a few of the most common Alpine directives. It doesn’t try to do everything, just the basics simply and efficiently.

I use it for most projects now.

Sort of...

I would describe it as closer to an alternative to hand rolling js, using JQuery, or older templating libraries like Knockout.

Where its at its best is with server rendered frameworks like Django, Laravel, or plane old hand rolled CGI. You can sprinkle in some Alpine with no build steps. It works particularly well with HTMX.

I wouldn't call it a React alternative because there are places where React (or Vue, or Svelt...) are better placed. But there are places they are overkill and it slots in perfectly.

Alpine borrows quite heavily from Vue, it has a very similar template DSL, and uses its reactivity subsystem (I personally think this is very well designed and makes Vue 3 an incredibly good app platform).

I also believe the new Laravel Livewire just released is built on top of Alpine, they are from the same developer.

If I'm doing server side rendering and need to sprinkle in some client side interactivity Alpine is what I reach for.

(You could describe any client side templating system as a React alternative)

It's similar, but the syntax and behavior are more inspired by Vue.

It's great for embedding behavior into HTML elements, as others have said. I have found it be very flexible and powerful. And it doesn't require a build step, so you can just pop it into plain old HTML (after importing the script, of course).

It's more like jQuery than react. Preact is a true lightweight react alternative.