It’s great for quickly adding interactivity to any static HTML element. You can turn any element into an “Alpine component” simply by adding the x-data attribu

It’s great for quickly adding interactivity to any static HTML element. You can turn any element into an “Alpine component” simply by adding the x-data attribute. Imagine a drop-down menu like so: <div> <button>Toggle menu</button> <div> Menu item 1… Menu item 2… etc… </div> </div> Without JS, everything would be visible at all times. You’d make this reactive with Alpine like this: <div x-data=“menuVisible = false”> <button @click=“menuVisible = !menuVisible”>Toggle menu</button> <div x-cloak x-show=“menuVisible” x-transition @click.outside=“menuVisible = false”> Menu item 1… Menu item 2… etc… </div> </div> When the button is clicked, the menu opens (or closes). x-transition adds a smooth fade effect, @click.outside hides the menu when clicked away from the element, and x-cloak prevents it from appearing before the DOM has fully loaded. Those are just a few of the most common Alpine directives. It doesn’t try to do everything, just the basics simply and efficiently. I use it for most projects now.