Introduction
Alpine is a rugged, minimal tool for composing behavior directly in your markup.
In simple words, Alpine.js is a lightweight JavaScript framework designed to make it easy to add interactivity to web applications without the complexity of larger frameworks like Angular, React, Vue.js etc.
Alpine consists of 18 directives, 10 magics, and 3 globals.
Directives / Attributes
Directives in Alpine.js refer to special HTML attributes that Alpine uses to control behavior. These directives are prefixed with x- and allow you to bind data, handle events, or apply reactive behavior to HTML elements. They function similarly to attributes in standard HTML but are extended by Alpine to add interactivity.
All the directives are explained in detail later in this book.
Magics / Properties
Magics in Alpine.js refer to special properties that provide a variety of useful features. These magics are prefixed with $ and allow you to access native JavaScript objects, interact with DOM nodes and provide access to Alpine's internals. They also add extra functionality, like watching for changes, running code after Alpine updates the DOM, and generating unique element IDs to avoid conflicts.
All the magics are explained in detail later in this book.
Globals / Methods
Globals in Alpine.js refer to special methods that help manage global state and re-use repeated content across your Alpine components.
All the globals are explained in detail later in this book.