Alpine.js Has a Free Lightweight JavaScript Framework for Adding Interactivity to HTML

#alpinejs #frontend #javascript #opensource

Alpine.js is a lightweight JavaScript framework for adding behavior to HTML markup. Think of it as Tailwind for JavaScript — minimal, declarative, composable.

What You Get for Free

17KB — tiny, no build step
Declarative — x-data, x-show, x-bind in HTML
Reactive — automatic DOM updates
Transitions — built-in CSS transitions
No build step — just a script tag
Works with any backend — Django, Rails, Laravel, PHP

Add to Any Page

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

Toggle Example

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open" x-transition>Hello!</div>
</div>

Fetch Data

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