HTMX ist eine JavaScript-Bibliothek, die HTML-Elementen erlaubt, Anfragen an den Server zu schicken und die Antwort direkt in die Seite einzusetzen. Entwickelt hat sie Carson Gross als Nachfolger seiner Bibliothek intercooler.js.
- HTMX
Eine JavaScript-Bibliothek, mit der HTML-Elemente über Attribute Inhalte vom Server nachladen und in die Seite einsetzen.
Beispiel: „Mit HTMX lädt die Trefferliste neu, sobald jemand im Filter eine Branche wählt, ohne dass die ganze Seite neu aufgebaut wird.“Auch: htmx, so schreibt das Projekt sich selbst.
Verwandt: Ajax. HTMX macht im Grunde dasselbe und legt die Anfragen in Attributen fest statt in eigenem JavaScript.
Wie HTMX arbeitet
Ein Attribut wie hx-get gibt an, welche Adresse abgerufen wird, hx-trigger, wann das passiert, und hx-target, wohin die Antwort kommt. Der Server antwortet mit fertigem HTML. Der Umweg über JSON und Code im Browser, der daraus wieder HTML baut, entfällt.
<input name="suche" hx-get="/suche"
hx-trigger="keyup changed delay:300ms"
hx-target="#treffer">
<div id="treffer"></div>Die Logik bleibt so auf dem Server, in der Sprache, in der die Anwendung ohnehin geschrieben ist, etwa PHP oder Python.
HTMX als Gegenentwurf zur Single Page Application
HTMX greift die ursprüngliche Idee des Webs auf: Der Server liefert HTML, und Links und Formulare lösen den Wechsel aus. Es erweitert diese Idee darum, dass jedes Element eine Anfrage stellen und jeden Teil der Seite ersetzen kann.
Für viele Anwendungen, die heute als Single Page Application entstehen, reicht das. Der Aufwand für eine zweite Anwendung im Browser, mit eigenem Zustand und eigenem Routing, fällt dann weg.
Wo HTMX an Grenzen stößt
Bei Oberflächen, die ohne Rückfrage beim Server reagieren müssen, etwa Zeichenwerkzeuge, Editoren oder alles, was offline funktionieren soll. Dort führt kein Weg an Logik im Browser vorbei, und HTMX lässt sich höchstens mit Alpine.js ergänzen.