Guide interactif — condensé de « Hypermedia Systems »
hypermedia.be rassemble, en un seul endroit et en français, l'essentiel du livre de référence sur htmx et l'architecture hypermédia : les concepts REST et HATEOAS, les attributs qui comptent vraiment, et des démonstrations qui tournent réellement dans cette page — sans build, sans framework JS côté client.
Ce bouton n'exécute aucun JavaScript personnalisé : l'attribut hx-post déclenche seul une requête, et htmx remplace le bouton par la réponse HTML reçue.
<button hx-post="/clicked" hx-swap="outerHTML">
Cliquez ici
</button>I. Concepts
Un système hypermédia laisse le serveur décrire, à chaque réponse, les actions possibles sous forme de liens et de formulaires. Le client n'a besoin de connaître qu'une poignée de règles : suivre un lien, soumettre un formulaire, afficher ce qu'on lui donne. htmx ne fait qu'étendre ce principe à des éléments qui, historiquement, ne pouvaient pas déclencher de requêtes.
Les balises <a> et <form> encodent déjà tout ce qu'il faut : une action, une méthode, une destination. htmx ne fait qu'ouvrir cette capacité au clic sur un <div>, à la frappe dans un champ, ou à un défilement.
Client-serveur, absence d'état côté serveur entre requêtes, mise en cache, et une interface uniforme où les réponses contiennent elles-mêmes les liens vers les actions suivantes (HATEOAS).
Le rendu reste sur le serveur ; le client ne gère qu'un échange local de fragments. On garde la réactivité perçue d'une application monopage sans dupliquer la logique de vue côté client.
Sites de contenu, back-offices, tableaux de bord internes, formulaires métier, applications où le serveur détient déjà la vérité sur les données.
Éditeurs collaboratifs temps réel, jeux, applications hors-ligne complexes, ou tout état client si volumineux qu'il ne peut raisonnablement transiter à chaque requête.
II. HTMX en pratique
htmx ajoute une douzaine d'attributs qui suffisent à couvrir l'essentiel des interactions d'une application : déclenchement, ciblage, échange, historique. Chaque démo ci-dessous exécute réellement ces attributs dans votre navigateur.
| Attribut | Rôle |
|---|---|
hx-get / hx-post / hx-put / hx-patch / hx-delete | Associe une méthode HTTP et une URL à n'importe quel élément, pas seulement <a> ou <form>. |
hx-trigger | Choisit l'événement déclencheur : click, keyup changed delay:300ms, every 2s, revealed… |
hx-target | Désigne l'élément qui recevra la réponse, via un sélecteur CSS ou des mots-clés comme this ou closest tr. |
hx-swap | Définit comment la réponse est insérée : innerHTML, outerHTML, beforeend, delete… |
hx-swap-oob | Permet à la réponse de mettre à jour un second endroit de la page, hors de la cible principale. |
hx-boost | Transforme discrètement les liens et formulaires existants en requêtes AJAX, sans changer le balisage. |
hx-indicator | Affiche un élément (spinner, barre) pendant la durée de la requête. |
hx-confirm | Demande une confirmation native avant d'envoyer la requête. |
hx-push-url | Met à jour l'URL et l'historique du navigateur après l'échange. |
Tapez dans le champ : chaque frappe attend 300 ms d'inactivité avant d'interroger le serveur, évitant une requête par lettre.
<input type="search"
hx-get="/search"
hx-trigger="keyup changed delay:300ms, search"
hx-target="#search-results"
hx-indicator="#search-spinner">La validation se fait côté serveur, à chaque changement : c'est la même logique qui validera à la soumission finale.
<input type="email"
hx-post="/validate-email"
hx-trigger="keyup changed delay:400ms, blur"
hx-target="#email-feedback">Le bouton se remplace lui-même par la réponse suivante, jusqu'à ce que le serveur cesse de renvoyer de bouton.
<button
hx-get="/contacts?page=2"
hx-target="this"
hx-swap="outerHTML">
Charger plus
</button>Après lancement, l'élément se ré-interroge lui-même toutes les 800 ms grâce à hx-trigger="every 800ms", jusqu'à ce que le serveur retire ce déclencheur de la réponse.
<!-- fragment renvoyé tant que le job tourne -->
<div
hx-get="/job-status"
hx-trigger="load, every 800ms"
hx-swap="outerHTML">…</div>hx-swap-oob)Supprimer une tâche remplace la ligne par une réponse vide et fait apparaître une notification ailleurs sur la page — dans la même réponse HTTP.
<!-- corps de la réponse à hx-delete : vide pour la cible, -->
<!-- + un swap "out of band" pour la notification -->
<div id="toast-region" hx-swap-oob="true">
<div class="toast">Tâche supprimée ✓</div>
</div>Posé sur un conteneur, hx-boost="true" intercepte tous les liens et formulaires enfants pour les transformer en requêtes AJAX, tout en conservant l'historique et le fonctionnement sans JavaScript comme filet de sécurité.
<body hx-boost="true">
<!-- tous les <a> et <form> deviennent AJAX -->
</body>htmx traite nativement les codes 2xx comme un succès et déclenche des événements JavaScript (htmx:beforeRequest, htmx:afterSwap, htmx:responseError…) sur lesquels du vanilla JS peut se brancher pour journaliser, animer ou déboguer.
document.body.addEventListener('htmx:afterSwap', (e) => {
console.log('Échange terminé sur', e.detail.target);
});III. Scripting pragmatique
Un menu qui s'ouvre, une valeur qui se recalcule à l'écran : ce sont des comportements purement locaux, sans requête HTTP. htmx les laisse volontairement de côté. Trois approches courantes coexistent — le vanilla JS reste la référence utilisée sur cette page.
Un bouton révèle un menu, se ferme au clic extérieur ou avec Échap, et gère aria-expanded — le tout en une douzaine de lignes de JavaScript, sans dépendance.
La cible de référence : disponible partout, sans dépendance, respecte la « localité du comportement » quand le script reste proche du balisage qu'il pilote.
<button id="menu-btn">Actions ⋯</button>
// script séparé, proche du composant
menuBtn.addEventListener('click', () => {
panel.hidden = !panel.hidden;
menuBtn.setAttribute('aria-expanded', !panel.hidden);
});Alpine.js ramène l'état directement dans le balisage via x-data, au prix d'une petite bibliothèque supplémentaire chargée sur la page.
<div x-data="{ open: false }">
<button x-on:click="open = ! open">Actions ⋯</button>
<div x-show="open">…</div>
</div>_hyperscript vise une syntaxe proche du langage naturel, directement dans un attribut, pour des interactions très locales.
<button _="on click toggle .hidden on #menu-panel">
Actions ⋯
</button>IV. API hypermédia vs API JSON
Rien n'empêche de servir en parallèle une API hypermédia pour l'interface web et une API JSON pour les intégrations tierces : elles répondent à des besoins différents et peuvent partager la même couche métier.
| Critère | API hypermédia (HTML) | API JSON classique |
|---|---|---|
| Format de réponse | Fragment HTML directement affichable | Données structurées, à interpréter côté client |
| Couplage client / serveur | Fort et assumé : le serveur pilote la vue | Faible : le client construit sa propre vue |
| Découvrabilité (HATEOAS) | Les actions suivantes sont dans la réponse | Généralement documentée à part (OpenAPI…) |
| Consommateur typique | L'interface web de l'application elle-même | Applications mobiles, intégrations tierces, partenaires |
| Évolution des champs | Peu de rupture : le HTML encapsule le détail | Toute évolution de forme peut casser des clients |
V. L'hypermédia sur mobile
Hyperview transpose l'idée d'htmx à une application mobile native : un format XML (HXML) décrit l'interface, un client React Native l'interprète, et le serveur reste seul maître de la logique et de l'état.
Des éléments comme <list>, <image> ou <text> décrivent l'écran ; le style est séparé, proche d'une feuille CSS restreinte.
Des déclencheurs comme long-press, load, visible ou refresh associent une action réseau à un geste, exactement comme hx-trigger côté web.
Entre une WebView, une application 100% native en JavaScript, et Hyperview : ce dernier vise le point d'équilibre pour des équipes déjà outillées côté serveur hypermédia.
Pour aller plus loin
Cette page condense et illustre ; les ressources ci-dessous font autorité.
Documentation officielle, référence complète des attributs et des extensions.
Le livre condensé sur cette page, en accès libre.
Code source, changelog et suivi des versions d'htmx.
L'hypermédia appliquée aux applications mobiles natives.