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 →