htmx Intensiv-Schulung: interaktive Oberflächen mit Hypermedia

Hypermedia statt JSON-API: htmx einordnen

• Hypermedia als Anwendungsmodell: der Server liefert HTML, nicht JSON
• htmx im Vergleich mit React, Vue und Angular: Zustand auf dem Server statt im Client
• Wann htmx passt – und wann eine Single Page Application die bessere Wahl bleibt
• Locality of Behaviour: Verhalten direkt am Element statt in separaten Skripten
• Dokumentation, Essays und das Buch „Hypermedia Systems“ als Ressourcen
• Versionen einordnen: htmx 1.x und 2.x im Bestand, htmx 4 mit fetch() statt XHR, View Transitions

Installation und erste Anwendung

• Einbinden per <script>-Tag, npm-Paket htmx.org@4 oder lokaler Kopie – ohne Build-Schritt
• Konfiguration über htmx.config und <meta name="htmx-config">
• Erste Anwendung: ein Klick lädt ein HTML-Fragment vom Server
• Serverseite wählen: Django, Flask, Spring Boot mit Thymeleaf, ASP.NET Core oder Go
• Übungen: Suchfeld, Nachladen von Listen, Löschen mit hx-confirm

Kernattribute

• hx-get, hx-post, hx-put, hx-patch und hx-delete für AJAX-Anfragen
• hx-target mit erweiterten Selektoren wie closest, next und find
• hx-swap-Strategien innerHTML, outerHTML, beforeend, delete und ihre Modifikatoren
• CSS-Übergänge ohne View Transitions: stabile IDs und die Klassen htmx-swapping, htmx-settling und htmx-added
• hx-select und hx-swap-oob: mehrere Bereiche mit einer Antwort aktualisieren
• Vererbung in htmx 4 explizit mit :inherited und :append, implizit mit hx-disinherit in htmx 2
• hx-vals, hx-include und hx-encoding: Daten gezielt mitsenden; hx-params entfällt in htmx 4
• Eigene Erweiterungen mit htmx.registerExtension (htmx 2: htmx.defineExtension)

Formulare und Request-Zyklus

• Formulare progressiv erweitern, sodass sie auch ohne JavaScript funktionieren
• Inline-Validierung je Feld mit hx-trigger="change" und Fehlerfragment vom Server
• HTML5-Validierung, hx-validate und Fehlermeldungen im zurückgelieferten Fragment
• Request-Header HX-Request, HX-Target und HX-Trigger serverseitig auswerten
• Response-Header HX-Redirect, HX-Retarget, HX-Reswap und HX-Trigger
• Ladeanzeigen mit hx-indicator, Doppelklicks verhindern mit hx-disable (htmx 2: hx-disabled-elt)
• Konkurrierende Anfragen steuern mit hx-sync

Trigger, Ereignisse und eigenes Skript

• hx-trigger mit Modifikatoren changed, delay, throttle, once und from
• Besondere Trigger: load, revealed, intersect und Polling mit every
• Lebenszyklus-Ereignisse in htmx 4: htmx:config:request, htmx:before:swap, htmx:after:settle
• Eigene Events auslösen und vom Server per Response-Header anstoßen
• Inline-Handler mit hx-on:click und hx-on::after:request für htmx-eigene Ereignisse
• Zusammenspiel mit Alpine.js oder _hyperscript für reines Client-Verhalten
• Muster: aktive Suche, Endlos-Liste, Klick-zum-Bearbeiten, Modaldialog

Echtzeit mit Server-Sent Events und WebSockets

• Server-Sent Events mit hx-sse:connect und automatischer Wiederverbindung (htmx 2: sse-connect)
• WebSockets mit der Erweiterung hx-ws: Verbindung per hx-ws:connect (htmx 2: ws-connect)
• Formulare über hx-ws:send senden, Antworten als Out-of-Band-Swaps oder <hx-partial> einsetzen
• SSE oder WebSocket? Auswahlkriterien, Wiederverbindung und Reverse Proxys
• Absicherung: Authentifizierung beim Verbindungsaufbau, Origin-Prüfung, Ratenbegrenzung
• Fallstudie: Live-Dashboard und Chat mit htmx

Navigation, Verlauf und SPA-Gefühl

• hx-boost: Links und Formulare ohne vollständiges Neuladen der Seite
• URLs und Verlauf mit hx-push-url und hx-replace-url; History-Cache in htmx 4 per hx-history-cache
• Zustand in URL, Server-Session und Formularfeldern statt in einem Client-Store
• Kombination mit bestehenden Bibliotheken und Web Components
• Anmeldung, Sitzungsablauf und Weiterleitung bei geboosteten Anfragen
• Seitentitel und <head>-Inhalte bei Teilnavigation mit hx-head (htmx 2: head-support)
• Animierte Seitenwechsel mit der View Transitions API, in htmx 4 über htmx.config.transitions

Fehlerbehandlung, Debugging und Tests

• Fehlerantworten 4xx/5xx gezielt einsetzen mit hx-status:422 (htmx 2: response-targets)
• Timeouts und Netzwerkfehler abfangen mit htmx:error (htmx 2: htmx:sendError, htmx:timeout)
• Debugging mit htmx.config.logAll, Browser-DevTools und dem Netzwerk-Tab
• Typische Fehler: falsches Ziel, doppelte IDs, ganze Seite statt Fragment, Event-Bubbling
• Fragment-Endpunkte serverseitig testen, Interaktionen mit Playwright prüfen

Sicherheit, Performance und Browser

• XSS vermeiden: Auto-Escaping der Template-Engine, hx-ignore für Nutzerinhalte (htmx 2: hx-disable)
• CSRF-Token per hx-headers oder Meta-Tag bei jeder Anfrage mitsenden
• htmx.config.mode statt selfRequestsOnly, inlineScriptNonce und eine strikte Content Security Policy
• HTTP-Caching mit Cache-Control, ETags und Vary: HX-Request
• Browserunterstützung: kein Internet Explorer seit htmx 2, fetch() in htmx 4; Tests auf Mobilgeräten
• Service Worker und Offline-Hinweise in Hypermedia-Anwendungen
• Performance messen: Fragmentgröße, Antwortzeit des Servers, Lighthouse und Core Web Vitals
• Wartbarkeit: Partials und Template-Komponenten auf dem Server sinnvoll schneiden

Fallstudien und schrittweise Einführung

• Fallstudie: Verwaltungsoberfläche mit Tabellen, Filtern und Paginierung
• Bestehende serverseitige Anwendungen Seite für Seite mit htmx ergänzen
• Teilumstieg von einer SPA: Codeumfang, Aufwand und Risiken bewerten
• Vorhandene JSON-APIs anbinden: JSON serverseitig in HTML-Fragmente rendern oder ein Backend-for-Frontend vorschalten
• Schritt-für-Schritt-Aufbau einer vollständigen htmx-Anwendung
• Migration von htmx 2 auf 4: npx htmx.org@4.0.0 upgrade-check, Erweiterung htmx-2-compat
• Geänderte Vorgaben in htmx 4: 4xx/5xx werden eingesetzt, hx-delete ohne Formulardaten, 60 s Timeout

htmx mit Coding-Agenten

• Attributreferenz von htmx 4 als Kontext mitgeben – Modelle schlagen oft Syntax von htmx 1 und 2 vor
• Projektregel für den Agenten: Verhalten am Element, Zustand auf dem Server, kein zusätzliches SPA-Framework
• Endpunkt und Partial immer gemeinsam erzeugen lassen; Ziel-IDs und HX-Request-Verzweigung festlegen
• Playwright-Tests für Swap, URL und Fokus als Abnahme jeder htmx-Änderung
• Generierte Templates auf Escaping, hx-swap-oob-Ziele und CSRF-Token durchsehen
• Nach jeder Änderung upgrade-check laufen lassen, damit der Agent keine Attribute aus htmx 2 einschleppt

Praxisprojekt: Ticket-Board mit Live-Aktualisierung

• Ticketliste mit aktiver Suche, Statusfilter und Paginierung
• Bearbeiten direkt in der Tabellenzeile mit Validierung auf dem Server
• Statuswechsel per Server-Sent Events in allen offenen Browserfenstern
• Abnahme mit Playwright und einer strikten Content Security Policy ohne unsafe-eval