OSS Tanbou
Sign in with GitHub
View on GitHubProject website

add state, events, and display behavior directly to HTML for small interactive interfaces

OSS scale score Not calculatedOSS health 100
About these scores

OSS scale score is an unbounded metric that log-compresses and weights Stars, Watchers, Forks, and Contributors. Discovery score is the current OSS scale score minus the score at discovery. Update pace is commits in the last 30 days, growth momentum is the OSS scale score difference within the recent observation window, and OSS health is a 0–100 rating based on available recency, Community Health, and release data.

Stars
31,960
Primary language
HTML
License
MIT
Repository last updated
Oct 5, 2026
On this page

Overview

Alpine.js is a lightweight framework that adds JavaScript state and interaction directly to HTML markup. It uses x-data for reactive state and directives such as x-on, x-text, x-show, x-model, and x-for to compose UI behavior.

Features and best fit

Based on official documentation; not hands-on tested · Content checked:

Key features

Install from a script tag or import it as a module

The official installation guide supports both a CDN script tag and an npm module workflow that calls Alpine.start().

Sources: [2]

Keep local state and DOM behavior close together with x-data

x-data declares local reactive state that event and rendering directives can access from the same markup.

Sources: [1][3]

Best fit

Fits progressive interaction on server-rendered HTML

Dropdowns, counters, search inputs, and similar local behaviors can be added without adopting a larger component runtime for the entire page.

Sources: [1]

Before adoption

Check extension registration order and call Alpine.start only once

For module usage, the installation guide places extension registration after importing Alpine and before Alpine.start(), and warns against starting Alpine more than once per page.

Sources: [2]

Official sources

  1. [1]Alpine.js v3.17.4 Start Here(2026-10-06)
  2. [2]Alpine.js v3.17.4 Installation(2026-10-06)
  3. [3]Alpine.js v3.17.4 State(2026-10-06)
  4. [4]Alpine.js v3.17.4 package metadata(2026-10-06)
  5. [5]Alpine.js v3.17.4 release(2026-10-06)
Supplemental curator note

Alpine.js fits server-rendered pages that need focused interactions such as dropdowns and search without adopting a larger application runtime. Module users should verify extension registration order and avoid starting Alpine more than once.

Try it in 3 steps

  1. 1

    Get the source

    git clone --depth 1 https://github.com/alpinejs/alpine.git
  2. 2

    Enter the repository

    cd alpine
  3. 3

    Check the official steps

    Continue with the commands in the README Installation, Quick Start, or Getting Started section.

    find . -maxdepth 1 -iname 'README*' -exec sed -n '1,220p' {} \; -quit
Check the official README

Growth

Growth trends · Last 30 days

31,960 Stars

Trend data is still being collected.

Built with

Categories and tags

Categories

Tags

GitHub data

GitHub dataView detailed GitHub data
View on GitHub
Stars
31,960
Forks
1,390
Watchers
222
Open issues
17
Owner type
Organization
Primary language
HTML
License
MIT
Repository last updated
Oct 5, 2026
Write a related article

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Report incorrect information

Tell us if any listing information is incorrect or outdated.

After reading this page, do you know what to do next?