# 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.

## Install

Save as a script file and run:

## Quick Use

```html
<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:
```bash
npm i alpinejs
```

```ts
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.

- **Repo**: https://github.com/alpinejs/alpine
- **Stars**: 31K+
- **Size**: ~15KB gzipped
- **License**: MIT

## 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

- Docs: https://alpinejs.dev
- GitHub: https://github.com/alpinejs/alpine
- License: MIT

---
Source: https://tokrepo.com/en/workflows/3ae90b65-35aa-11f1-9bc6-00163e2b0d79
Author: Script Depot