Alpine.js is "Tailwind for JavaScript." Reactive behavior directly in HTML markup. 17KB, no build step, perfect companion to htmx or server-rendered pages. Quick Start <script defer src= "https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" ></script> <div x-data= "{ open: false }" > <button @ click= "open = !open" > Toggle </button> <div x-show= "open" x-transition > Hello! I'm visible now. </div> </div> Key Directives <!-- Reactive data --> <div x-data= "{ count: 0 }" > <button @ click= "count++" > Count: <span x-text= "count" ></span></button> </div> <!-- Conditional rendering --> <div x-data= "{ tab: 'home' }" > <button @ click= "tab = 'home'" > Home </button> <button @ click= "tab = 'about'" > About </button> <div x-show= "tab === 'home'" > Home content </div> <div x-show= "tab === 'about'" > About content </div> </div> <!-- Loops --> <ul x-data= "{ items: ['Apple', 'Banana', 'Cherry'] }" > <template x-for= "item in items" > <li x-text= "item" ></li> </template> </ul> <!-- Two