| name | alpinejs-3-15-11 |
| description | A skill for building reactive user interfaces with Alpine.js 3.15, a minimal JavaScript framework that uses HTML-first declarative syntax with directives like x-data, x-model, and x-show. Use when creating interactive web components, forms, dropdowns, modals, and dynamic UI elements without build tools or complex setup. |
| license | MIT |
| author | Tangled <noreply@tangledgroup.com> |
| version | 0.1.0 |
| tags | ["javascript","frontend","reactive","html","directives","web-components","lightweight-framework"] |
| category | frontend-development |
| external_references | ["https://alpinejs.dev/","https://github.com/alpinejs/alpine"] |
Alpine.js 3.15
Overview
Alpine.js is a rugged, minimal framework for composing behavior directly in your markup. Think of it like jQuery for the modern web — drop in a script tag and start building reactive components. It uses HTML attributes (directives) to declare interactivity inline with your markup, requiring no build step, no virtual DOM, and no JavaScript component files.
Alpine provides 15+ directives, 6 magic properties, and 2 global methods for building everything from simple toggles to complex stateful UIs. It uses Vue.js's reactivity engine under the hood but exposes it through a declarative HTML-first API. At approximately 7KB gzipped, it is one of the smallest reactive frameworks available.
When to Use
- Adding interactivity to static HTML pages without a build step
- Building dropdowns, modals, tabs, accordions, and form components
- Sprinkling reactive behavior into server-rendered templates (Laravel Blade, Django, etc.)
- Prototyping UI interactions quickly
- Replacing jQuery-based DOM manipulation with declarative reactive syntax
- Adding client-side interactivity alongside backend frameworks
- Building accessible components with focus trapping (
x-trap)
- Creating reusable component patterns with
Alpine.data()
Core Concepts
Directives are HTML attributes prefixed with x- that declare reactive behavior. For example, x-data defines a component's state, x-show toggles visibility, and @click (shorthand for x-on:click) listens for events.
Components are scoped by x-data. Every Alpine component starts with an x-data directive that declares reactive data. Child elements within the x-data scope can reference and modify this data through other directives.
Reactivity means when data changes, everything that depends on it updates automatically. Alpine tracks property access through JavaScript Proxies (via Vue's reactivity engine) and re-evaluates dependent expressions.
Magics are special $-prefixed properties available within Alpine expressions, such as $el (current DOM element), $store (global state), $dispatch (event dispatching), and $watch (reactive watchers).
Installation / Setup
From a CDN Script Tag
The simplest approach. Add Alpine to your HTML with :
