Tag: Alpine.js

1. Alpine.js Konfetti-Effekt: Canvas-Animation ohne Framework

   28.03.2026

   Eine Konfetti-Animation klingt nach einer Aufgabe für eine fertige Bibliothek – doch wer die Canvas-API einmal verstanden hat, braucht nichts weiter als Alpine.js. Partikel-Physik, Farbpaletten, requestAnimationFrame und sauberes Speicher-Cleanup lassen sich vollständig in einer x-data-Komponente kapseln.

   Read more

2. Alpine.js Starfield: Partikel-Hintergrund mit Canvas ohne Bibliothek

   24.03.2026

   Three.js ist 600 KB schwer, tsParticles bringt weitere Abhängigkeiten mit. Für einen animierten Sternenhimmel oder Partikel-Hintergrund braucht man beides nicht. Die native Canvas API mit requestAnimationFrame und Alpine.js x-data liefern dasselbe visuelle Ergebnis in unter 100 Zeilen – ohne Build-Step, ohne npm, ohne Bundle-Overhead.

   Read more

3. Countdown Timer für Sale Aktionen mit Alpine.js

   22.03.2026

   Ein Countdown Timer für Sale Aktionen lebt von Millisekunden-genauer Restzeit, sauberem Ablauf-Verhalten und stabiler Performance über Stunden hinweg. Mit Alpine.js entsteht ein solcher Countdown Timer in wenigen Zeilen x-data, ganz ohne externe Timer-Bibliothek, dafür mit voller Kontrolle über Zeitzonen, Mehrfach-Instanzen und Barrierefreiheit.

   Read more

4. Alpine.js persist: State im localStorage persistent speichern

   11.03.2026

   Wer reaktiven State seitenübergreifend und nach Browser-Reload erhalten will, braucht eine Persistenz-Schicht. Alpine.js liefert mit $persist eine magische Property, die jeden reaktiven Wert automatisch mit localStorage synchronisiert – ohne Event-Listener, ohne manuelle Serialisierung, ohne Boilerplate.

   Read more

5. Alpine.js x-mask: Input-Formatierung für Telefon, IBAN und Datum

   24.02.2026

   Eingabefelder, die sich automatisch formatieren, wirken professioneller und reduzieren Benutzerfehler. x-mask erledigt genau das – live, ohne Bibliothek, direkt in Alpine.js. Dieser Artikel erklärt statische und dynamische Masken, Zeichenklassen und Integration in Hyvä-Formulare.

   Read more

6. Alpine.js Internals: Wie Reaktivität ohne Virtual DOM funktioniert

   15.02.2026

   Alpine.js braucht keinen Virtual DOM, keinen Compiler und keinen Build-Step, um reaktive Komponenten zu erzeugen. Stattdessen nutzt es JavaScript-Proxies, reaktive Effekte und MutationObserver – ein Modell, das überraschend elegant und direkt verständlich ist, sobald man es einmal durchschaut.

   Read more

7. Alpine.js x-teleport: Elemente aus dem DOM-Baum verschieben

   14.02.2026

   x-teleport löst eines der härtesten DOM-Probleme in komponentenbasierten Frontends: Elemente wie Modals, Toasts und Dropdown-Menus müssen außerhalb ihres DOM-Elternelements gerendert werden, behalten aber ihren Alpine.js-Kontext vollständig. Das Portal-Muster, bekannt aus React und Vue, ist jetzt mit einem einzigen HTML-Attribut nutzbar.

   Read more

8. Custom Events als Komponenten-Bus nutzen | Alpine.js

   10.02.2026

   Custom Events sind der leichtgewichtige Weg, unabhängige Alpine.js-Komponenten miteinander kommunizieren zu lassen, ohne einen zentralen Store aufzusetzen. Mit $dispatch und passenden Event-Listenern entsteht ein Komponenten-Bus, bei dem Sender und Empfänger nichts voneinander wissen müssen, solange beide denselben Event-Namen und dieselbe Payload-Struktur verwenden.

   Read more

9. Alpine.js Formularvalidierung ohne jQuery Validate

   10.02.2026

   jQuery Validate ist in Hyvä Themes nicht verfügbar – und das ist gut so. Ein eigenes Alpine.js-Validierungssystem ist reaktiver, leichter und vollständig ins State-Modell integriert. Benutzerdefinierte Regeln, asynchrone Serverprüfungen und Submit-Schutz entstehen aus weniger als 60 Zeilen Code.

   Read more

10. Alpine.js x-model Modifier: .lazy, .debounce, .number erklärt

    04.02.2026

    x-model synchronisiert Eingabefelder mit Alpine-Daten – aber standardmäßig bei jedem Tastendruck. Mit .lazy, .debounce und .number wird aus einem einfachen Two-Way-Binding ein präzises Werkzeug für API-Calls, Zahleneingaben und performance-optimierte Formulare.

    Read more