# 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 the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## 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 handles server-rendered HTML + partial updates; Alpine handles client-side local state. They're complementary and are often used together.

**Q: Is it suitable for SPAs?**
A: Not really. Alpine is designed for server-first architectures (MPA + sprinkles). For SPAs, use Vue/Svelte/React.

**Q: What's the performance like?**
A: For small-scale scenarios, performance is excellent (no virtual DOM overhead). For large list rendering, it lags behind compile-time frameworks.

## Sources & Credits

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

---
Source: https://tokrepo.com/en/workflows/alpine-js-rugged-minimal-js-framework-your-markup-3ae90b65
Author: Script Depot