Installation

Htmx est une bibliothèque JavaScript orientée navigateur, sans dépendances. Cela signifie que l’utiliser est aussi simple que d’ajouter une balise <script> à la tête de votre document. Il n’est pas nécessaire d’utiliser un système de build.

Via un CDN (par exemple, unpkg.com)

Le moyen le plus rapide pour démarrer avec htmx est de le charger via un CDN. Vous pouvez simplement ajouter ceci à votre balise head et commencer :

<script src="https://unpkg.com/[email protected]" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous"></script>

Une version non minifiée est également disponible pour le débogage :

<script src="https://unpkg.com/[email protected]/dist/htmx.js" integrity="sha384-yZq+5izaUBKcRgFbxgkRYwpHhHHCpp5nseXp0MEQ1A4MTWVMnqkmcuFez8x5qfxr" crossorigin="anonymous"></script>

Bien que l’approche CDN soit extrêmement simple, vous pouvez envisager de ne pas utiliser de CDNs en production.

Télécharger une copie

Le moyen le plus simple pour installer htmx est de simplement le copier dans votre projet.

Téléchargez htmx.min.js depuis unpkg.com et ajoutez-le au répertoire approprié dans votre projet, puis incluez-le là où nécessaire avec une balise <script> :

<script src="/path/to/htmx.min.js"></script>

npm

Pour les systèmes de build de type npm, vous pouvez installer htmx via npm :

npm install [email protected]

Après l’installation, vous devrez utiliser les outils appropriés pour utiliser node_modules/htmx.org/dist/htmx.js (ou .min.js). Par exemple, vous pourriez regrouper htmx avec quelques extensions et du code spécifique au projet.

Webpack

Si vous utilisez webpack pour gérer votre JavaScript :

• Installez htmx via votre gestionnaire de paquets préféré (comme npm ou yarn).
• Ajoutez l’importation à votre index.js.

import 'htmx.org';

Si vous souhaitez utiliser la variable globale htmx (recommandé), vous devez l’injecter dans la portée de la fenêtre :

• Créez un fichier JS personnalisé.
• Importez ce fichier dans votre index.js (sous l’importation de l’étape 2).

import 'path/to/my_custom.js';

• Ajoutez ensuite ce code au fichier :

window.htmx = require('htmx.org');

• Enfin, reconstruisez votre bundle.