Skip to content
Get packs

Alpine.js

A small JavaScript framework that adds interactive behavior directly inside your HTML.alpinejs/alpine

GitHub Download v3.17.5
Stars
32k
Forks
1.4k
Licence
MIT
Language
HTML
Last update
12 days ago
Type
Library

What it is

Alpine.js is a lightweight JavaScript framework for adding interactive behavior to web pages by writing small pieces of logic directly in HTML markup. The README in this repository is mainly a contribution guide; the full user documentation lives on alpinejs.dev. It is organized as a monorepo of the core library plus optional plugins such as collapse, focus, intersect, mask, morph, and persist.

  • Build a show/hide toggle or collapsible section with a plugin like collapse
  • Format a text input as the user types using the mask plugin
  • Persist UI state across page loads with the persist plugin
  • Trigger behavior when an element scrolls into view with the intersect plugin

Great for

  • Developers adding dropdowns, tabs, or toggles to server-rendered pages
  • Teams who want light interactivity without a full single-page app build setup
  • Developers who want to include a single script tag and start working
  • Contributors who want to improve the core library or plugins

Not ideal for

  • Projects that need a full app framework with routing and a build pipeline; the README describes only the core and plugins, so check the docs for those features
  • Readers looking for end-user documentation; this README points to alpinejs.dev for most usage details
Step-by-step guide: how to use Alpine.jsInstall, first run, examples, tips and FAQs
Alpine.js vs Stimulus

How to get it

  1. 1

    Clone and build from source

    You'll need: Node.js · npm

    Clone the repository

    git clone https://github.com/alpinejs/alpine

    Install dependencies

    npm install

    Build the packages

    npm run build
  2. 2

    Run it

    • Clone the repository and run npm install in the root directory.
    • Run npm run build to produce the bundles.
    • Include /packages/alpinejs/dist/cdn.js in a script tag on a webpage.
    • Open the page in a browser to confirm Alpine loads.
  3. 3

    Get the most out of it

    • Use the plugins listed in the package table (collapse, focus, intersect, mask, morph, persist) for specific behaviors
    • Use the CSP-safe build from the csp package if your site restricts inline scripts
    • Run npm run cypress or npm run vitest to test changes during development
    • Read the docs in /packages/docs for usage details

Downloads

Source code (.zip)main branch · straight from GitHubRelease v3.17.5Release notes and sourceOfficial website & docsalpinejs.dev

Strengths

  • Small, focused scope described in the README as a minimal framework
  • Can be loaded from a single script tag using the built CDN file
  • Modular: optional plugins are separate packages in the repo

Trade-offs

  • The README is a contribution guide, so detailed usage must be found in external docs
  • The history plugin's name is noted as likely to change
  • Documentation for version 2 is kept separately, so readers must pick the right version

How it compares

ProjectStarsTypeLevelUpdatedBest for
alpine (this)32kLibrarybeginner12 days agoDevelopers adding dropdowns, tabs, or toggles to server-rendered pages
stimulus13.1kLibrarybeginner8 days agoDevelopers who already render HTML on the server and want light interactivity

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.