Alpine.js Has a Free API You Should Know About

Alpine.js is a lightweight JavaScript framework for composing behavior directly in your HTML. Think of it as Tailwind for JavaScript — minimal, declarative, and powerful.

Why Alpine.js is Perfect for Small Interactions

A developer added React to a Django template just for a dropdown menu and a modal. 400KB of JavaScript for 20 lines of interactivity. Alpine.js does the same in 15KB — right in the HTML.

Key Features:

• Declarative — Behavior defined in HTML attributes
• Reactive — Automatic DOM updates when data changes
• Tiny — 15KB minified and gzipped
• No Build Step — Script tag and go
• Plugins — Collapse, mask, focus, persist, and more

Quick Start

<script defer src="https://unpkg.com/alpinejs"></script>

Dropdown

<div x-data="{ open: false }">
  <button @click="open = !open">Menu</button>
  <div x-show="open" @click.away="open = false">
    <a href="/profile">Profile</a>
    <a href="/settings">Settings</a>
    <a href="/logout">Logout</a>
  </div>
</div>

Todo List

<div x-data="{ todos: [], newTodo: '' }">
  <input x-model="newTodo" @keydown.enter="todos.push(newTodo); newTodo = ''">
  <template x-for="todo in todos">
    <li x-text="todo"></li>
  </template>
</div>

Why Choose Alpine.js

1. No build step — add script tag, write HTML
2. Perfect for server-rendered apps — Django, Rails, Laravel, Go
3. Lightweight — 15KB vs 100KB+ for React

Check out Alpine.js docs to get started.

---

Building interactive websites? Check out my Apify actors or email [e-mail] for custom solutions.