hugo-mod-alpinejs

One small example per wired-up module, to verify the setup works.

Core

A counter using x-data, x-on and x-text.

Collapse

This region animates its height open and closed with x-collapse.

Focus

Focus is trapped here. Press Esc or the button to leave.

Intersect

Mask

Card number, masked as 9999 9999 9999 9999:

Morph

Original node, morphed in place.

Persist

Type a name, then reload the page — $persist keeps it.

Stored:

Resize

Drag the corner of the box; x-resize reports its size.

Sort

Drag to reorder.

  • ① First
  • ② Second
  • ③ Third

Anchor

Positioned under the button with x-anchor.

Ajax

Load fragment

Click the link to fetch and swap in remote markup.