Alpine is a collection of 15 attributes, 6 properties, and 2 methods. There is no better way to get a feel for what Alpine is and what it can do, than by seeing it for yourself:

Inside of x-data, in plain JavaScript, you declare an object of data that Alpine will track. Every property inside this object will be made available to other directives inside this HTML element.

Alpine is now available for use inside your page. Note that you will still need to define a component with x-data in order for any Alpine.js attributes to work.

Unfortunately, getting them all to play nicely with your Alpine app can be challenging. We've done that work for you. We've built custom code and tutorials for integrating with the most popular open source …

In the above example, if we click the button in the first component, Alpine will dispatch the "foo" event. Because of the way events work in the browser, they "bubble" up through parent elements all the …

State (JavaScript data that Alpine watches for changes) is at the core of everything you do in Alpine. You can provide local data to a chunk of HTML, or make it globally available for use anywhere on a …

Alpine has a very open codebase that allows for extension in a number of ways. In fact, every available directive and magic in Alpine itself uses these exact APIs.

Everything in Alpine starts with the x-data directive. x-data defines a chunk of HTML as an Alpine component and provides the reactive data for that component to reference.

Alpine offers a handful of useful directives for manipulating the DOM on a web page. Let's cover a few of the basic templating directives here, but be sure to look through the available directives in the …

Every bit of reactivity that takes place in Alpine, happens because of two very important reactive functions in Alpine's core: Alpine.reactive(), and Alpine.effect().