Alpine.js Has a Free API That Adds Reactivity to HTML With Minimal JavaScript

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-way binding -->
<div x-data="{ search: '' }">
  <input x-model="search" placeholder="Search...">
  <p>You typed: <span x-text="search"></span></p>
</div>

Fetch Data

<div x-data="{ users: [] }" x-init="users = await (await fetch('/api/users')).json()">
  <template x-for="user in users">
    <p x-text="user.name"></p>
  </template>
</div>

Alpine vs React vs htmx

Feature	Alpine	React	htmx
Size	17KB	130KB+	14KB
Build step	No	Yes	No
Reactivity	Client	Client	Server
Use case	Sprinkles of JS	Full SPA	AJAX HTML

The Bottom Line

Alpine.js is for adding interactivity to server-rendered pages — dropdowns, tabs, modals, search — without a framework. Think of it as jQuery's modern, reactive replacement.

---

Need to automate data collection or build custom scrapers? Check out my Apify actors for ready-made tools, or email [e-mail] for custom solutions.