Htmx Cheatsheet

Bases & syntaxe

Ajouter des attributs htmx

<a hx-get="/url" href="#">Cliquez-moi</a>

Utiliser hx-* pour ajouter de l'interactivité via Htmx

Envoi de formulaires avec htmx

<form hx-post="/submit" hx-target="#response">
  <input type="text" name="name"/>
  <button type="submit">Envoyer</button>
</form>

Pour envoyer des données via POST et mettre à jour une section spécifique

Structures de données

Sélectionner des éléments avec htmx

<div hx-get="/data" hx-select="#data-section">
  Affichez les données ici
</div>

Utiliser hx-select pour cibler une partie spécifique du contenu à mettre à jour

Insérer le résultat dans un élément existant

<button hx-post="/add" hx-target=".items">Ajouter</button>
<div class="items"></div>

Pour insérer le résultat à l'intérieur d'un élément existant

Fonctions & methodes essentielles

Afficher une erreur personnalisée

<form hx-post="/submit" hx-on:error="alert('Erreur !')">
  <!-- contenu du formulaire -->
</form>

Pour afficher un message d'erreur lorsqu'une requête échoue

Mettre à jour un élément sans recharger la page

<button hx-get="/update">Mettre à jour</button>
<div id="content"></div>

Pour mettre à jour le contenu d'un élément en utilisant une requête GET

Patterns courants

Gestion des formulaires avec htmx

<form hx-post="/submit" hx-target="#response">
  <input type="text" name="name"/>
  <button type="submit">Envoyer</button>
</form>
<div id="response"></div>

Pattern standard pour la gestion des formulaires avec des retours immédiats

Ajout d'un élément à une liste

<button hx-post="/add" hx-target=".items">Ajouter un item</button>

Pour ajouter dynamiquement des éléments à une liste existante

Opérations avancées

Utiliser htmx avec AJAX

<div hx-get="/data" hx-swap="innerHTML">
  Affichez les données ici
</div>

Pour effectuer une requête AJAX et mettre à jour le contenu de l'élément

Gestion des événements custom

<button hx-post="/submit" hx-on:success="alert('Succès !')">Envoyer</button>

Pour définir des actions personnalisées en réponse à des événements spécifiques

Debugging & outils

Déboguer avec htmx

<button hx-get="/debug" hx-on:error="console.error('Erreur !', event.detail)">Debug</button>

Pour afficher les erreurs dans la console pendant le débogage

Utiliser l'inspecteur de l'élément pour voir les attributs htmx

<div hx-get="/data" hx-target="#content">
  <!-- contenu -->
</div>

Pour inspecter et comprendre les attributs htmx sur un élément