Alpine.js

Alpine.js

Minimalistisches, deklaratives JS-Framework fürs HTML

Was ist Alpine.js?

Alpine.js ist ein kleines JavaScript-Framework, das es ermöglicht, interaktive Funktionen direkt im HTML umzusetzen. Es verwendet ein deklaratives Vorgehen: Statt DOM-Elemente manuell mit JavaScript zu verändern, wird das gewünschte Verhalten im Markup beschrieben.

Typisch sind einfache UI-Elemente wie ein- und ausblendbare Bereiche, Formulare, Tabs oder kleinere interaktive Komponenten. Alpine.js benötigt kein Build-System und kann per Skript-Tag eingebunden werden. Dadurch eignet es sich vor allem für Projekte, bei denen Funktionen ergänzt oder erweitert werden sollen, ohne eine umfangreiche Frontend-Architektur einzuführen.

Die Syntax und Codebeispiele: x-data, x-show, @click, x-model, x-for, x-transition, etc.


Beispielcode für einen Counter

Beispielcode für Inhalte ein/ausblenden

Kleine Demo (statisch)

Zähler


Ein-/Ausblenden von Inhalten

Das ist eine Alpine.js Box!

Kontaktformular

Formular wurde übermittelt.

Umschalten zum Darkmode (auf div begrenzt)


Suchfunktion