# alpinejs

> The rugged, minimal JavaScript framework

Latest version **3.17.4** (published 2026-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install alpinejs
pnpm add alpinejs
yarn add alpinejs
bun add alpinejs
```

## Health

**Score 73/100 (B)** — status: active.

Positive: has types package; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.17.4 |
| Published | 2026-09-21 |
| First published | 2019-12-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/alpinejs) |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 675.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 31958 |
| Author | Caleb Porzio |
| Maintainers | calebporzio |

## Links

- npm: https://www.npmjs.com/package/alpinejs
- Repository: https://github.com/alpinejs/alpine
- Homepage: https://alpinejs.dev
- Issues: https://github.com/alpinejs/alpine/issues
- npm.io page: https://npm.io/package/alpinejs

## Dependencies (1)

- [@vue/reactivity](https://npm.io/package/@vue/reactivity.md) ~3.5.40

## Recent versions

- 3.17.4 (latest) — 2026-09-21
- 3.17.3 — 2026-09-14
- 3.17.2 — 2026-09-07
- 3.17.1 — 2026-08-31
- 3.17.0 — 2026-08-30
- 3.16.3 — 2026-08-24
- 3.16.2 — 2026-08-17
- 3.16.1 — 2026-08-11
- 3.16.0 — 2026-08-10
- 3.15.12 — 2026-04-30
- 3.15.11 — 2026-04-02
- 3.15.10 — 2026-04-01
- 3.15.9 — 2026-03-27
- 3.15.8 — 2026-02-02
- 3.15.7 — 2026-02-02
- … 143 more at https://npm.io/package/alpinejs/versions

## README

# Alpine.js

Go to the Alpine docs for most things: [Alpine Docs](https://alpinejs.dev)

You are welcome to submit updates to the docs by submitting a PR to this repo. Docs are located in the [`/packages/docs`](/packages/docs) directory.

Stay here for contribution-related information.

> Looking for V2 docs? [here they are](https://github.com/alpinejs/alpine/tree/v2.8.2)

<p align="center"><a href="https://alpinejs.dev/patterns"><img src="/hero.jpg" alt="Alpine Component Patterns"></a></p>

## Contribution Guide:

### Quickstart

* clone this repo locally
* run `npm install` & `npm run build`
* Include the `/packages/alpinejs/dist/cdn.js` file from a `<script>` tag on a webpage and you're good to go!

### Brief Tour
You can get everything installed with: `npm install` in the root directory of this repo after cloning it locally.

This repo is a "mono-repo" using npm workspaces for managing the packages. Each package has its own folder in the `/packages` directory.

Rather than having to run separate builds for each package, all package bundles are handled with the same command: `npm run build`

Here's a brief look at each package in this repo:

Package | Description
--- | ---
[alpinejs](packages/alpinejs) | The main Alpine repo with all of Alpine's core
[collapse](packages/collapse) | A plugin for expanding and collapsing elements using smooth animations
[csp](packages/csp) | A repo to provide a "CSP safe" build of Alpine
[docs](packages/docs) | The Alpine documentation
[focus](packages/focus) | A plugin that allows you to manage focus inside an element
[history](packages/history) | A plugin for binding data to query string parameters using the history API (name is likely to change)
[intersect](packages/intersect) | A plugin for triggering JS expressions based on elements intersecting with the viewport
[mask](packages/mask) | A plugin for automatically formatting a text input field as a user types
[morph](packages/morph) | A plugin for morphing HTML (like morphdom) inside the page intelligently
[persist](packages/persist) | A plugin for persisting Alpine state across page loads

The compiled JS files (as a result of running `npm run [build/watch]`) to be included as a `<script>` tag for example are stored in each package's `packages/[package]/dist` directory.

Each package should at least have: a "cdn" build that is self-initializing and can be included using the `src` attribute in a `<script defer>` tag, and a `module.[esm/cjs].js` file that is used for importing as a JS module (cjs for node, esm for everything else).

The bundling for Alpine V3 is handled exclusively by ESBuild. All of the configuration for these builds is stored in the `scripts/build.js` file.

### Testing
There are 2 different testing tools used in this repo: Cypress (for integration tests), and Vitest (for unit tests).

All tests are stored inside the `/tests` folder under `/tests/cypress` and `/tests/vitest`.

If you wish to only run Cypress and open it's user interface (recommended during development), you can run: `npm run cypress`

If you wish to only run Vitest tests, you can run `npm run vitest` like normal and target specific tests.

---
_Source: https://npm.io/package/alpinejs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._