ScriptsApr 11, 2026·1 min read

Alpine.js — Rugged Minimal JS Framework for Your Markup

Alpine.js is a rugged, minimal framework for composing JavaScript behavior directly in your HTML markup. Like jQuery for the modern web but declarative — reactive data, directives, and state with 15KB gzipped and zero build step.

SC
Script Depot · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="{ open: false, count: 0 }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open" x-transition>
    <p>Count: <span x-text="count"></span></p>
    <button @click="count++">Increment</button>
  </div>
</div>

Or via npm:

npm i alpinejs
import Alpine from "alpinejs";
(window as any).Alpine = Alpine;
Alpine.start();
Intro

Alpine.js is a rugged, minimal framework for composing JavaScript behavior directly in your HTML markup. Built by Caleb Porzio (Livewire creator) as a modern take on what Tailwind did for CSS — 15 directives you can sprinkle on any HTML page without a build step. Perfect for Laravel + Livewire, Rails + Hotwire, and server-rendered apps that need sprinkles of interactivity.

What Alpine.js Does

  • x-data — component-scoped reactive state
  • x-show / x-if — conditional rendering
  • x-for — list rendering
  • x-model — two-way binding for inputs
  • x-text / x-html — content bindings
  • x-on (or @) — event listeners
  • x-bind (or :) — attribute bindings
  • x-transition — enter/leave animations
  • x-init — run on component init
  • Stores — global state via Alpine.store()
  • Plugins — persist, focus, intersect, mask, morph

Architecture

Alpine walks the DOM at Alpine.start(), parses directives, and wires reactive Proxies to DOM nodes. Each x-data island is independent. No virtual DOM — mutations happen directly on the real DOM.

Self-Hosting

CDN or npm. No build step required.

Key Features

  • 15KB gzipped
  • No build step needed
  • 15 directives cover 90 percent of interactivity
  • Reactive via Proxy
  • Transition helpers
  • Global stores
  • Plugins ecosystem
  • Perfect companion to server-rendered backends
  • CDN or bundler friendly

Comparison

Framework Build Step Scope Best For
Alpine.js No Per-element Sprinkles of interactivity
HTMX No Per-element HTML over the wire
Vue Yes Component SPAs
Svelte Yes Component SPAs
Vanilla JS No Manual Anything

常见问题 FAQ

Q: Alpine vs HTMX？ A: HTMX 处理服务端渲染 + partial update；Alpine 处理客户端局部状态。两者互补，常一起用。

Q: 适合 SPA 吗？ A: 不适合。Alpine 是为 server-first 架构设计的（MPA + sprinkles），SPA 用 Vue/Svelte/React。

Q: 性能如何？ A: 小型场景性能极佳（无虚拟 DOM 开销）。但大型列表渲染不如编译时框架。

来源与致谢 Sources

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

Starship — Minimal Blazing-Fast Customizable Shell Prompt

Starship is a minimal, blazing-fast, and infinitely customizable prompt for any shell. Works with bash, zsh, fish, PowerShell, nushell, and more. Single TOML config file and Rust-powered speed with gorgeous defaults.

Script Depot

ripgrep (rg) — Recursively Search Directories with Regex

ripgrep recursively searches directories for a regex pattern while respecting your gitignore. Written in Rust, ripgrep is the fastest search tool on the market — used inside VS Code, GitHub, and many other dev tools.

Script Depot

Oh My Zsh — Delightful Framework for Managing Zsh Configuration

Oh My Zsh is a delightful, community-driven framework for managing your Zsh configuration. 300+ plugins (git, docker, node, python, homebrew), 140+ themes, and auto-update tooling. The de facto starting point for developer terminals.

Script Depot
◈Home🔍Search👤Me