Alpine.js

1. Start Here

   What Alpine is, loading it from a CDN or npm, and building a first component.

2. State

   x-data, scoped reactive state, nested components and Alpine.data reuse.

3. Templating

   x-text, x-html, x-bind, x-if, x-for, x-show, x-model and other template directives.

4. Events

   x-on listeners, modifiers, keyboard events and custom events.

5. Lifecycle

   x-init, init hooks, alpine:init and when components initialize.

6. Reactivity Directives

   x-effect, $watch and how Alpine tracks dependencies.

7. Magic Properties

   $refs, $el, $dispatch, $nextTick, $store and other magic helpers.

8. Global Store

   Alpine.store for state shared between components.

9. Reusable Data

   Alpine.data to define reusable component logic.

10. Transitions

    x-transition enter/leave classes and durations.

11. Plugins

    Official plugins: persist, intersect, mask, collapse, focus, morph, anchor, sort.

12. Extending Alpine

    Registering custom directives and magics with Alpine.directive and Alpine.magic.

Each section links to the official page. Titles and summaries by Extra Credit; the docs belong to their authors.