Alpine.js: a lightweight framework for productive developers

Introduction

Front-end web development has increased in complexity over the past decade. Despite being well aware of this fact, we are still reaching for JavaScript frameworks because building good user interfaces is even more challenging than writing Vanilla JavaScript.

Luckily, Alpine.js is a good compromise. This Alpine.js tutorial shows how I use x-data, x-show, x-transition, and click.outside to build small interactive pieces.

Who this is for

You want simple interactivity without a heavy build step. You’re comfortable with HTML and a bit of JavaScript, and you’re curious when Alpine.js vs jQuery makes sense.

What is Alpine.js and how does it benefit you

Alpine.js is a tiny JavaScript framework for building interactive user interfaces.

Imagine Vue.js, but smaller, easier and pragmatic. Alpine relies on a small set of directives and magic helpers you sprinkle into your HTML.

This is all it takes to build an Alpine.js dropdown:

<div x-data="{ open: false }" @click.outside="open = false">
    <button
        @click="open = ! open"
        class="dropdown-trigger"
        :aria-expanded="open"
        aria-controls="dropdown-menu"
    >
        Toggle
    </button>
    
    <div id="dropdown-menu" x-cloak x-show="open" x-transition>
        …
    </div>
</div>

Tip: add a tiny CSS rule to prevent a flash of unstyled content when using x-cloak.

[x-cloak] { display: none !important; }

No component file and no build process are required. You can see what’s going on by looking at the HTML.

Alpine.js vs jQuery: gently modernize how you write JavaScript

In my experience, teams keep jQuery for habit, AJAX helpers, DOM queries, and quick effects. If you want a number, as of August 31, 2025, jQuery appears on about 72.8% of websites according to W3Techs.

Alpine.js keeps things easy like jQuery but feels modern. Here’s how I switch common patterns:

First, jQuery’s $() isn’t needed. Use document.querySelector() and document.querySelectorAll().
Second, make AJAX requests with the Fetch API: fetch('https://example.com/api/bar').

If you need conditional styles and transitions, here’s an Alpine.js dropdown with accessibility in mind:

<div x-data="{ open: false }" @click.outside="open = false">
    <button
        class="dropdown-trigger"
        :class="{ 'dropdown-trigger--active': open }"
        @click="open = ! open"
        :aria-expanded="open"
        aria-controls="menu"
    >
        Toggle
    </button>
  
    <ul x-cloak x-show="open" x-transition>
        …
    </ul>
</div>

I’ve often seen messy codebases built around jQuery with behavior scattered everywhere. Alpine.js helps by keeping behavior close to the markup.

Setting up Alpine.js in any project only takes a copy-and-paste

Alpine.js is one of the easiest frameworks to set up. Just copy-and-paste this code snippet into the <head> of your page:

<!DOCTYPE html>
<html>
    <head>
        …
        <style>[x-cloak] { display: none !important; }</style>
        <script defer src="https://unpkg.com/alpinejs@3.14.9/dist/cdn.min.js"></script>
    </head>
    <body>
        …
    </body>
</html>

Using a version range like @3.x.x causes a redirect to the latest matching version. I prefer to pin a specific version in production to avoid redirects and improve cache hit rates; see Unpkg for details.

Same thing for plugins. Make sure they come before Alpine.js when using a CDN:

<script defer src="https://unpkg.com/@alpinejs/intersect@3.14.9/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/@alpinejs/persist@3.14.9/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/@alpinejs/focus@3.14.9/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/alpinejs@3.14.9/dist/cdn.min.js"></script>

CDN vs bundling

CDN: great for quick demos or small pages. I typically add one script tag and go.
Bundling: better for apps. Use a build tool so you can tree-shake and register plugins before Alpine.start().

Set up Alpine.js in a Laravel project using Vite

First, install Alpine.js in your project.

npm install alpinejs

Then, in your main JavaScript file (in a Laravel project, it’s resources/js/app.js), import Alpine and boot it up.

import Alpine from 'alpinejs'

Alpine.start()

You can assign your Alpine object to a global variable. It’s useful to play with it in the devtools.

import Alpine from 'alpinejs'

window.Alpine = Alpine

Alpine.start()

If you’re using plugins, register them before calling Alpine.start().

import Alpine from 'alpinejs'
import Intersect from '@alpinejs/intersect'

Alpine.plugin(Intersect)

window.Alpine = Alpine

Alpine.start()

Make sure Blade includes your Vite entry. I usually add @vite('resources/js/app.js') in the layout’s <head>, and I confirm that app.js is listed as a Vite entry in vite.config.js. See the Laravel Vite documentation for examples.

Don’t reinvent the wheel, use the official plugins

The creator of Alpine.js provides plugins that handle common tasks.

Mask formats user input on the fly.
Intersect runs code once the user scrolls to a given point.
Persist adds the $persist helper to save state.
Focus handles focus; x-trap is great for modals.
Collapse animates height transitions.
Morph morphs HTML while preserving state.

These Alpine plugins extend the framework for real tasks. For example, Mask helps format phone numbers, Intersect helps with lazy loading, and Focus improves accessibility.

Alpine.js also has dev tools

You can inspect Alpine components right in your browser. Install the official Alpine.js DevTools for Chrome or the Firefox extension. If you want more features, there’s also a paid Alpine.js DevTools Pro option.

Copy and paste components from libraries

As you know now, Alpine.js is a minimal JavaScript framework. One of its key features is its simplicity.

This is achieved through a declarative syntax and a small set of directives that can be used to create dynamic behaviors right from your HTML.

This philosophy makes it easy for developers to create reusable components that can be easily integrated into a variety of projects without the need for complex configuration.

Here are a bunch of websites sharing Alpine.js components, mostly for free:

Alpine UI Components
Alpine Toolbox
HyperJS (an Alpine-focused example repository)

These resources provide a wide range of pre-built components, from simple toggles to complex data tables. Using these components can significantly speed up your development process and ensure consistency across your projects.

Learn, contribute and follow

Alpine.js documentation provides a comprehensive overview of its features and directives. It’s well-written and includes plenty of examples to help you get started quickly.
If you like Alpine.js and would like to contribute to the project, its GitHub repository is the best place to start. You can report issues, suggest features, or even submit pull requests to improve the framework.
Alpine.js on Twitter is where you want to be for the latest news about the framework. Follow to stay updated on new releases, tips, and community highlights.

By engaging with the Alpine.js community through these channels, you’ll not only improve your skills but also contribute to the growth of this lightweight yet powerful framework.

Conclusion

I reach for Alpine.js when I need small, interactive UI pieces without heavy tooling. For quick pages I load it from a CDN and pin versions; for apps I bundle it with Vite and register plugins before Alpine.start(). Give the dropdown example a try, then explore the official plugins and install the Alpine.js devtools to speed up your workflow.

Did you like this article? Then, keep learning: