Alpine.js Directive Cheatsheet

← All tools

Core directives with snippets and live examples. Meta note: this page runs on Alpine — each demo uses its own x-data scope so nothing clashes.

No directives match that filter.

About this tool

Alpine.js adds sprinkles of interactivity without a build step. This cheatsheet covers the directives you reach for daily — not every plugin or magic helper.

Live demos are isolated components registered as separate Alpine.data() scopes so they do not fight the page's own cheatsheet state.

Read more

Free books, courses, and software

Get my programming books, course editions, and complete software.

Get the download library →