alpinejs

The rugged, minimal JavaScript framework

weekly downloads395K

versionv3.15.8

licenseMIT

categoryfrontend

Overview

Alpine.js is a minimal JavaScript framework that adds reactive behavior directly to HTML markup through declarative directives. Weighing under 20kb with no build process required, it provides Vue-inspired reactivity for developers who need interactivity without the complexity of full SPA frameworks. You include a single script tag and start using x-prefixed attributes to control DOM behavior.

The framework exists to fill the gap between vanilla JavaScript DOM manipulation and heavyweight frameworks like React or Vue. Before Alpine, developers often reached for jQuery for simple interactions or were forced to adopt entire framework ecosystems for basic reactivity. Alpine offers a middle ground: reactive data binding, conditional rendering, and event handling without virtual DOMs, build configurations, or CLI tools.

With nearly 400,000 weekly downloads, Alpine is widely adopted for progressive enhancement scenarios. It's particularly popular among developers working with server-rendered frameworks (Laravel, Rails, Django) who need client-side reactivity for specific components without converting their entire application to a SPA. The framework's HTML-centric approach means your interactive logic lives alongside your markup, reducing the mental overhead of managing separate JavaScript files for simple UI behaviors.

Quick Start

typescript

<!DOCTYPE html>
<html>
<head>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.15.8/dist/cdn.min.js"></script>
</head>
<body>
  <div x-data="{
    todos: ['Review pull requests', 'Update documentation'],
    newTodo: '',
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push(this.newTodo.trim());
        this.newTodo = '';
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }">
    <h2>Tasks (<span x-text="todos.length"></span>)</h2>
    
    <form @submit.prevent="addTodo">
      <input 
        type="text" 
        x-model="newTodo" 
        placeholder="Add new task"
        :disabled="todos.length >= 10">
      <button type="submit">Add</button>
    </form>

    <ul>
      <template x-for="(todo, index) in todos" :key="index">
        <li>
          <span x-text="todo"></span>
          <button @click="removeTodo(index)">Delete</button>
        </li>
      </template>
    </ul>

    <p x-show="todos.length === 0" style="color: gray;">
      No tasks yet. Add one above!
    </p>
  </div>
</body>
</html>

Use Cases

Enhancing server-rendered applications: Add dropdowns, modals, tabs, and accordions to Laravel Blade or Rails ERB templates without shipping a full JavaScript framework. Alpine handles state management and DOM updates while your backend continues serving HTML.

Form validation and dynamic inputs: Create multi-step forms with conditional field visibility, real-time validation feedback, and computed values using x-model for two-way binding and x-show for conditional rendering. No form library dependencies needed.

Interactive dashboard widgets: Build collapsible panels, filterable data tables, and toggleable charts where users need to show/hide sections or filter content client-side. Alpine's reactivity ensures UI updates automatically when filter criteria change.

Replacing jQuery dependencies: Migrate legacy Bootstrap or Foundation component interactions from jQuery to Alpine. The directive-based approach provides similar DOM manipulation capabilities with built-in reactivity and a smaller bundle size.

Static site interactivity: Add search filters, theme toggles, or shopping cart functionality to JAMstack sites without introducing build complexity. Alpine works directly in the browser, making it ideal for sites deployed to simple hosting without Node.js environments.

Pros & Cons

Pros

+No build process or tooling required — include via CDN and start coding immediately
+Extremely small footprint (<20kb) with minimal performance overhead compared to React or Vue
+Low learning curve with only 15 directives — developers productive within hours
+Progressive enhancement friendly — add to specific page sections without rewriting existing code
+Reactive data binding without virtual DOM complexity — uses real DOM manipulation

Cons

−Not suitable for complex state management — no built-in store like Redux or Pinia for large applications
−Logic in HTML attributes can become unwieldy for complex components with significant business logic
−Limited ecosystem compared to React/Vue — fewer third-party plugins and community components available
−No official SSR or hydration support — primarily designed for client-side rendering scenarios
−Performance degrades with deeply nested reactive data structures — direct DOM manipulation less efficient at scale

Alternatives

vuev3.5.28

The progressive JavaScript framework for building modern web UI.

frontendvue

8.5M / week

Install

bash

npm install alpinejs

bash

pnpm add alpinejs

bash

bun add alpinejs

Overview

Quick Start

typescript

<!DOCTYPE html>
<html>
<head>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.15.8/dist/cdn.min.js"></script>
</head>
<body>
  <div x-data="{
    todos: ['Review pull requests', 'Update documentation'],
    newTodo: '',
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push(this.newTodo.trim());
        this.newTodo = '';
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }">
    <h2>Tasks (<span x-text="todos.length"></span>)</h2>
    
    <form @submit.prevent="addTodo">
      <input 
        type="text" 
        x-model="newTodo" 
        placeholder="Add new task"
        :disabled="todos.length >= 10">
      <button type="submit">Add</button>
    </form>

    <ul>
      <template x-for="(todo, index) in todos" :key="index">
        <li>
          <span x-text="todo"></span>
          <button @click="removeTodo(index)">Delete</button>
        </li>
      </template>
    </ul>

    <p x-show="todos.length === 0" style="color: gray;">
      No tasks yet. Add one above!
    </p>
  </div>
</body>
</html>

Use Cases

Pros & Cons

Pros

+No build process or tooling required — include via CDN and start coding immediately
+Extremely small footprint (<20kb) with minimal performance overhead compared to React or Vue
+Low learning curve with only 15 directives — developers productive within hours
+Progressive enhancement friendly — add to specific page sections without rewriting existing code
+Reactive data binding without virtual DOM complexity — uses real DOM manipulation

Cons

−Not suitable for complex state management — no built-in store like Redux or Pinia for large applications
−Logic in HTML attributes can become unwieldy for complex components with significant business logic
−Limited ecosystem compared to React/Vue — fewer third-party plugins and community components available
−No official SSR or hydration support — primarily designed for client-side rendering scenarios
−Performance degrades with deeply nested reactive data structures — direct DOM manipulation less efficient at scale