TL;DR: htmx macht deine Webseiten interaktiv — ganz ohne React, Angular oder Vue. Mit ein paar HTML-Attributen ersetzt du tonnenweise JavaScript und bekommst trotzdem dynamische UIs. Hier erfährst du, wie das funktioniert und wann es sich lohnt.

🤔 Was ist htmx eigentlich?

Stell dir vor, du könntest deine Webseite interaktiv machen, ohne auch nur eine Zeile JavaScript zu schreiben. Klingt utopisch? Genau das ist htmx.

htmx ist eine kleine JavaScript-Bibliothek (ca. 14 KB gzipped), die HTML um neue Attribute erweitert. Damit kannst du direkt aus HTML heraus AJAX-Requests abfeuern, DOM-Elemente austauschen und sogar WebSockets nutzen. Das Konzept dahinter heißt "HTML over the wire" — statt JSON hin und her zu schicken, liefert der Server fertig gerendertes HTML zurück.

htmx - high power tools for HTML

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML

htmx.org

Die Philosophie ist radikal einfach: HTML war schon immer eine Hypertext-Sprache. Warum sollte nur <a> und <form> HTTP-Requests machen dürfen? htmx gibt jedem Element diese Fähigkeit.

🚀 Warum die Welt htmx braucht

Mal ehrlich: Bist du es auch leid, für jede kleine Interaktion ein komplettes Frontend-Framework hochzuziehen? React, Angular, Vue — alle großartig, aber manchmal schießt du damit mit Kanonen auf Spatzen.

Die JavaScript-Framework-Müdigkeit ist real. Du willst nur ein Formular ohne Page-Reload absenden? Dafür brauchst du kein 200 KB großes Framework mit Build-Pipeline, State Management und Virtual DOM. htmx sagt: "Halt, stopp. Das geht einfacher."

jQuery ist tot

Warum du jQuery sofort aus deinen Projekten entfernen solltest

disane.dev

Das Beste: htmx arbeitet mit deinem Server zusammen, nicht gegen ihn. Dein Backend rendert HTML — genau das, was Server seit 30 Jahren tun. Keine API-Layer, keine JSON-Serialisierung, kein Frontend-State-Management.

⚙️ Die Core-Attribute — dein neues Werkzeugset

htmx erweitert HTML um eine Handvoll Attribute, die es in sich haben. Hier sind die wichtigsten:

HTTP-Request-Attribute

hx-get, hx-post, hx-put und hx-delete machen genau das, was du denkst — sie feuern den entsprechenden HTTP-Request ab:

<button hx-get="/api/users" hx-target="#user-list">
  Benutzer laden
</button>

<div id="user-list">
  <!-- Hier landen die Ergebnisse -->
</div>

Ein Klick auf den Button, und der Inhalt von /api/users wird direkt in #user-list eingefügt. Kein JavaScript. Kein fetch(). Kein setState().

hx-target — Wohin damit?

hx-target bestimmt, welches Element den Response-HTML erhält. Du kannst CSS-Selektoren verwenden:

<button hx-get="/notifications" hx-target="#notification-bell">
  Benachrichtigungen prüfen
</button>

hx-swap — Wie einfügen?

hx-swap steuert, wie der neue Inhalt eingefügt wird:

hx-trigger — Wann auslösen?

hx-trigger bestimmt, welches Event den Request auslöst. Standardmäßig ist es click bei Buttons und change bei Inputs:

<input type="text" name="search"
       hx-get="/search"
       hx-trigger="keyup changed delay:300ms"
       hx-target="#search-results">

Das delay:300ms ist Debouncing out of the box. Einfach so. Kein lodash.debounce nötig.

💻 Praxisbeispiele — htmx in Aktion

Live-Suche mit Ergebnissen

Eine Suchleiste, die während der Eingabe Ergebnisse anzeigt — in drei Zeilen HTML:

<input type="search" name="q"
       hx-get="/search"
       hx-trigger="input changed delay:300ms"
       hx-target="#results"
       hx-indicator="#spinner"
       placeholder="Suche...">

<span id="spinner" class="htmx-indicator">🔄 Suche...</span>
<div id="results"></div>

Der Server antwortet einfach mit HTML-Fragmenten:

<!-- Server Response für /search?q=htmx -->
<ul>
  <li>htmx - high power tools for HTML</li>
  <li>htmx vs React - ein Vergleich</li>
</ul>

Infinite Scroll

Endloses Scrollen ohne eine Zeile JavaScript:

<div id="articles">
  <article>Artikel 1...</article>
  <article>Artikel 2...</article>

  <div hx-get="/articles?page=2"
       hx-trigger="revealed"
       hx-swap="outerHTML">
    Lade mehr...
  </div>
</div>

hx-trigger="revealed" feuert, sobald das Element in den Viewport scrollt. Der Server liefert die nächsten Artikel plus einen neuen Trigger für Seite 3. Genial einfach.

Formular ohne Page-Reload

<form hx-post="/contact" hx-target="#form-response" hx-swap="outerHTML">
  <input type="text" name="name" placeholder="Dein Name" required>
  <input type="email" name="email" placeholder="Deine E-Mail" required>
  <textarea name="message" placeholder="Deine Nachricht"></textarea>
  <button type="submit">Absenden</button>
</form>

<div id="form-response"></div>

REST-APIs verstehen und nutzen

Alles was du über REST-APIs wissen musst

disane.dev

Löschen mit Bestätigung

<button hx-delete="/users/42"
        hx-confirm="Willst du diesen Benutzer wirklich löschen?"
        hx-target="closest tr"
        hx-swap="outerHTML swap:500ms">
  🗑️ Löschen
</button>

Das hx-confirm zeigt einen nativen Browser-Dialog. Das swap:500ms gibt dir Zeit für eine CSS-Transition bevor das Element verschwindet.

🎨 hx-indicator — Ladezustände leicht gemacht

Nutzer brauchen Feedback. Mit hx-indicator zeigst du Loading-States ohne JavaScript:

<button hx-get="/slow-endpoint" hx-indicator="#loading">
  Daten laden
</button>
<span id="loading" class="htmx-indicator">
  ⏳ Bitte warten...
</span>

.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline;
}

htmx fügt automatisch die Klasse htmx-request hinzu, während ein Request läuft. Fertig.

🔧 hx-boost — Progressive Enhancement auf Steroiden

Das ist mein persönlicher Favorit. hx-boost verwandelt normale Links und Formulare in AJAX-Requests — ohne dass du irgendwas ändern musst:

<body hx-boost="true">
  <nav>
    <a href="/about">Über uns</a>
    <a href="/contact">Kontakt</a>
  </nav>

  <main id="content">
    <!-- Seiteninhalt -->
  </main>
</body>

Jeder Link innerhalb von hx-boost wird abgefangen und per AJAX geladen. Die URL im Browser ändert sich trotzdem (History API). Und wenn JavaScript deaktiviert ist? Funktioniert alles ganz normal als klassische Navigation. DAS ist Progressive Enhancement.

🎯 htmx vs. React/Angular/Vue — Wann was?

Jetzt wird's ernst. htmx ist nicht immer die richtige Wahl. Hier ein ehrlicher Vergleich:

Nutze htmx, wenn:

• Du Content-lastige Websites baust (Blogs, CMS, E-Commerce)
• Du schnelle Prototypen brauchst
• Dein Team hauptsächlich Backend-Entwickler hat
• Du Progressive Enhancement wichtig findest
• Du keine komplexe Client-Side-Logik brauchst

Nutze React/Angular/Vue, wenn:

• Du komplexe SPAs baust (Dashboards, Editoren, Chat-Apps)
• Du Offline-Funktionalität brauchst
• Du ein großes Frontend-Team hast
• Du umfangreiche Client-Side-State-Logik brauchst

🛡️ Integration mit Backend-Frameworks

htmx ist Backend-agnostisch. Dein Server muss nur HTML zurückliefern. Hier ein paar Beispiele:

Express / NestJS

// Express Route
app.get('/search', (req, res) => {
  const query = req.query.q;
  const results = searchDatabase(query);

  // Einfach HTML zurückgeben!
  res.send(`
    <ul>
      ${results.map(r => `<li>${r.title}</li>`).join('')}
    </ul>
  `);
});

// NestJS Controller
@Controller('search')
export class SearchController {
  @Get()
  search(@Query('q') query: string) {
    const results = this.searchService.find(query);
    return results.map(r => `<li>${r.title}</li>`).join('');
  }
}

Django

# views.py
from django.shortcuts import render

def search(request):
    query = request.GET.get('q', '')
    results = Article.objects.filter(title__icontains=query)

    if request.headers.get('HX-Request'):
        # htmx Request — nur das Fragment zurückgeben
        return render(request, 'partials/search_results.html',
                      {'results': results})

    # Normaler Request — volle Seite
    return render(request, 'search.html',
                  {'results': results, 'query': query})

Der HX-Request Header ist genial — damit erkennst du, ob ein Request von htmx kommt, und kannst entsprechend nur ein HTML-Fragment statt der ganzen Seite zurückgeben.

htmx Documentation

The official htmx documentation with guides, references and examples

htmx.org

⚠️ Limitierungen — Wann htmx NICHT die Antwort ist

So sehr ich htmx mag, es gibt klare Grenzen:

• Komplexe Client-Side-Logik: Drag & Drop-Editoren, Echtzeit-Collaboration, Bildbearbeitung — dafür brauchst du echtes JavaScript.
• Offline-First-Apps: htmx braucht immer eine Serververbindung. Kein Server, keine Interaktion.
• Hochfrequente UI-Updates: Wenn du 60fps-Animationen oder Echtzeit-Datenvisualisierungen brauchst, ist ein Virtual DOM effizienter.
• Komplexer State: Wenn deine UI von vielen abhängigen Zuständen abhängt, wird es mit htmx schnell unübersichtlich.
• Mobile Apps: Für React Native oder ähnliches ist htmx nicht gedacht.

Aber hey — für die meisten Websites da draußen sind diese Punkte irrelevant. Nicht jede Website ist Google Docs.

🚀 Browser-Support und Bundle-Größe

htmx unterstützt alle modernen Browser: Chrome, Firefox, Safari, Edge. IE11 wird seit htmx 2.x nicht mehr unterstützt — aber mal ehrlich, das ist 2025, IE11 sollte längst Geschichte sein.

Die Bundle-Größe? Ca. 14 KB gzipped. Zum Vergleich: React + ReactDOM sind ~45 KB gzipped. Angular startet bei ~65 KB. Du sparst massiv an Bandbreite und Ladezeit.

Einbinden? Ein Script-Tag:

<script src="https://unpkg.com/[email protected]"></script>

Kein npm install. Kein Build-Step. Kein node_modules-Ordner mit 500 MB. Einfach einbinden und loslegen.

💡 Fazit

htmx ist keine Revolution — es ist eine Rückbesinnung. Zurück zu dem, was HTML eigentlich sein sollte: eine mächtige Hypertext-Sprache. Statt immer komplexere JavaScript-Frameworks zu bauen, erweitert htmx HTML um die fehlenden Fähigkeiten.

Für Content-Websites, Dashboards, Admin-Panels und die meisten CRUD-Anwendungen ist htmx eine ernsthafte Alternative zu React & Co. Du schreibst weniger Code, brauchst keine Build-Pipeline und deine Seiten sind schneller.

Mein Tipp: Probier es bei deinem nächsten Projekt einfach mal aus. Du wirst überrascht sein, wie weit du ohne ein einziges npm install kommst.

htmx - high power tools for HTML

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML

htmx.org