Learn ALPINE-JS with Real Code Examples

Include via CDN: `<script src='https://cdn.jsdelivr.net/npm/alpinejs' defer></script>`

Or install via npm: `npm install alpinejs`

Import in JS: `import Alpine from 'alpinejs'`

Initialize with: `window.Alpine = Alpine; Alpine.start();`

Use any text editor - no tooling required

Just include Alpine via CDN

Or install via npm

Use any HTML or templating engine

No frameworks required

Works with any backend stack

No config files required

package.json (optional for npm)

alpine.js initialization file (optional)

vite.config.js (optional for bundling)

tailwind.config.js (if using Tailwind)

No official CLI

npm install alpinejs

import Alpine from 'alpinejs'

Alpine.start()

Use with bundlers: Vite/Webpack

Use external JSON translation files

Reactive translations via Alpine stores

Dynamic locale switching

Integration with i18next

Supports formatting via Intl API

Use semantic HTML

x-show retains elements in DOM for screen readers

Use ARIA attributes

Keyboard handling with x-on:keydown

Focus management with Alpine Focus plugin

TailwindCSS (most common)

Utility classes

Transitions via x-transition

Dynamic classes via :class

Alpine + CSS-in-JS (optional)

Local component state via x-data

Global state via Alpine.store()

Events for cross-component communication

Magic helpers for reactive access

Plugins extend global behaviors

AJAX via fetch inside x-data

Use $watch for reacting to data changes

Interoperates well with htmx

Stores for shared state

LocalStorage via plugins