Page 1

Example Alpine.js component: accordion

Use the hx-history-preserve attribute and unique id on the root element of each Alpine.js component to preserve its initial markup state across swaps.

Example Alpine.js component: search

Always use inline directives over runtime declarations, for example use x‑data over Alpine.data.

Example Alpine.js async component

Load components asynchronously on-demand, using Async Alpine

A new version of this website is available.