Sprinkle reactivity right in your HTML. Alpine gives you the power of a reactive framework with a handful of attributes — no build step, no components, just markup.
x-data declares a scope of reactive state, and x-show toggles visibility. Click to open the menu — this is real, live Alpine.
<div x-data="{ open: false }"> <button @click="open = !open">Menu ▾</button> <div x-show="open" @click.outside="open = false"> …menu items… </div> </div>
x-model binds an input to state. Type below and watch the live preview, all without leaving HTML.
Hi there, !
<div x-data="{ name: '' }"> <input x-model="name"> <p>Hi there, <b x-text="name || 'friend'"></b>!</p> </div>
Show and hide content with a smooth transition using x-show + x-transition.
<button @click="open = !open">Toggle</button> <div x-show="open" x-transition>…details…</div>
x-for (on a <template>) loops over an array. Add and remove tags in this live Alpine list.
<template x-for="(tag, i) in tags" :key="i"> <li> <span x-text="tag"></span> <button @click="tags.splice(i, 1)">×</button> </li> </template>
cdn.min.js, deferred). Every demo above is genuine Alpine running directly off HTML attributes — x-data, x-show, x-model, x-for, x-text and x-transition — with no build step. The shared CSS shell provides page styling.