Alpine.js Has a Free API — The JavaScript Framework for HTML Enthusiasts

Alpine.js is a lightweight JavaScript framework that lets you add interactivity directly in your HTML markup. No build step, no virtual DOM, no JSX — just HTML attributes. Why Alpine.js? 14KB — tiny footprint, CDN-ready No build step — works with a single <script> tag HTML-first — logic lives in your markup with x- directives Perfect companion for HTMX, Tailwind, server-rendered HTML Quick Start <script defer src= "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" ></script> <div x-data= "{ count: 0 }" > <p x-text= "`Count: ${count}`" ></p> <button @ click= "count++" > Increment </button> </div> That's it. No npm, no webpack, no config files. Core Directives <!-- x-data: reactive state --> <div x-data= "{ open: false, name: '' }" > <!-- x-show: toggle visibility --> <div x-show= "open" > <p> This is visible when open is true </p> </div> <!-- x-bind: dynamic attributes --> <button :class= "open ? 'bg-blue' : 'bg-gray'" > Toggle </button> <!-- x-on / @: event listeners --> <bu