Esta página aún no se ha traducido - se muestra la versión en English.

Interactivity with Alpine.js

Copy buttons, live filters, and sortable tables - with no extra setup.

Interactivity with Alpine.js

Every page already loads Alpine.js - it's what powers the dark-mode toggle and language dropdown in every built-in theme. That same instance is available to your own content too, for free: since raw block-level HTML passes through Markdown untouched, you can drop Alpine's x-data/x-show/@click attributes straight onto any HTML block and it just works.

<div x-data="{ copied: false }">
  <button type="button" @click="navigator.clipboard.writeText('bxSites new my-docs'); copied = true">
    <span x-show="!copied">Copy install command</span>
    <span x-show="copied">Copied!</span>
  </button>
</div>

Before reaching for Alpine

Most "interactive" needs already have a purpose-built content block that needs no JS at all - a collapsible section is ::: expandable, a numbered walkthrough is ::: stepper, alternative content behind tabs is the === "Tab" syntax from lesson 6. Alpine is for what those don't cover - anything with its own real client-side state.

Feeding Alpine from real data

A native pipe table is static once built - for one a reader can actually sort or filter, have Alpine own the rows instead of a hand-typed JS array. Combined with data files from a couple of lessons back, a one-line functions.bxs helper safely serializes data.* into an x-data attribute, so the same reusable data drives both a static table and an interactive one.

Full recipes, including the sortable-table walkthrough: Interactivity with Alpine.js.