Repolode
Submit
alpinejs

alpinejs/alpine

A rugged, minimal JavaScript framework for adding reactive behavior directly in your HTML markup.

View on GitHubWebsite
Stars
31,984
Forks
1,396
Open issues
25
Last commit
4 days ago

What is it?

Alpine.js is a minimal JavaScript framework for composing interactive behavior inside HTML. Developers attach state and event handlers to elements with attributes, so small pieces of interactivity such as dropdowns, modals, tabs, or form logic can live next to the markup they affect, without a separate build-heavy application structure.

The project is distributed as a CDN script that can be included with a single script tag, or as an npm module for bundled projects. Its core is complemented by official plugins for collapsing elements with animation, managing focus, binding state to query strings, intersection-based triggers, input masking, DOM morphing, and persisting state across page loads.

The repository is a mono-repo managed with npm workspaces, containing the core package, each plugin, a CSP-safe build, and the documentation site. Contributors can build all packages with a single command and run Cypress integration tests and Vitest unit tests.

Key features

  • 01Declarative state and event handling written directly with HTML attributes.
  • 02Available as a CDN script tag or an npm module.
  • 03Official plugins for collapse animations, focus, masks, persistence, and DOM morphing.
  • 04A CSP-safe build variant for environments with strict Content Security Policies.
  • 05Mono-repo with Cypress and Vitest test suites.

Use cases

  • Adding dropdowns, modals, or tabs to a server-rendered page without a full SPA framework.
  • Persisting UI state such as open panels or form values across page loads.
  • Building interactive forms with input masks and focus management.
  • Working in environments that require a CSP-safe JavaScript build.

Quick start

  1. 1

    Clone the repo locally

  2. 2

    Install dependencies

    npm install
  3. 3

    Build all packages

    npm run build
  4. 4

    Include the built cdn.js file in a script tag on your page

Things to know

  • This repo is the contribution repo; most usage documentation lives on the external Alpine docs site.

Topics

#javascript#frontend#html#reactive#ui-framework#declarative#lightweight

FAQ

What is alpine?
A rugged, minimal JavaScript framework for adding reactive behavior directly in your HTML markup. Alpine.js is a minimal JavaScript framework for composing interactive behavior inside HTML. Developers attach state and event handlers to elements with attributes, so small pieces of interactivity such as dropdowns, modals, tabs, or form logic can live next to the markup they affect, without a separate build-heavy application structure.
Is alpine free to use? What license does it have?
alpine is open source under the MIT license. Check the license terms before using it in commercial products.
Is alpine still maintained?
Actively maintained. The last commit to alpine was on Oct 16, 2026.
What can I use alpine for?
Adding dropdowns, modals, or tabs to a server-rendered page without a full SPA framework. Persisting UI state such as open panels or form values across page loads. Building interactive forms with input masks and focus management. Working in environments that require a CSP-safe JavaScript build.
How do I install alpine?
Clone the repo locally Install dependencies: npm install Build all packages: npm run build Include the built cdn.js file in a script tag on your page
Where can I get alpine?
The source code and installation instructions are on GitHub: https://github.com/alpinejs/alpine

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects