alpine

Alpine.js is a minimal JavaScript framework that lets you add interactive behavior directly in HTML attributes, without needing to write a separate JavaScript file or set up a build process. It is designed for situations where you want some interactivity, like a dropdown menu, a tab panel, or a toggle, but a full framework like React or Vue feels like too much overhead.

The way it works is through special attributes you add to your HTML elements. For example, adding x-show to an element and binding it to a variable makes that element visible or hidden based on the value. Adding x-on to an element lets you run expressions when events occur. You define your component's state using x-data directly in the HTML, and Alpine automatically keeps the DOM in sync with that state. There is no virtual DOM, no component files, no import statements needed for basic use.

Alpine is intentionally small and is designed to be dropped into an existing HTML page via a single script tag, making it compatible with server-rendered applications where you do not control the entire page structure. It pairs well with tools like Laravel, Rails, or any server-side framework that generates HTML.

You would use Alpine.js when you are building or maintaining a traditional server-rendered website and want small interactive enhancements without the complexity of a full JavaScript framework. It is also used alongside tools like Tailwind CSS for building HTML component libraries.

The primary language is HTML (for the documentation and examples), but the core library is JavaScript. The repository is a monorepo containing the core Alpine package plus optional plugins for features like collapsible elements, input masking, intersection observers, and persisting state across page loads.