htmx 4.0 is under construction — migration guide

Installation

Install htmx via CDN, npm, or direct download

htmx is a single JavaScript file with dependencies. No build step is required.

Method 1: CDN (Fastest)

  1. Add this in your <head> tag:

<script defer src="https://cdn.jsdelivr.net/npm/htmx.org@next"
        integrity="sha384-hUj4cz/Dd2p+Dq0r8A6TAMS1u7gu2bTyisk8xCQX3nodazPP+fRmcAWJrTh4Ycwb"
        crossorigin="anonymous"></script>
Other options

Unminified (for debugging):


<script defer src="https://cdn.jsdelivr.net/npm/htmx.org@next/dist/htmx.js"
        integrity="sha384-CHKZYHwIgmpkwoWtoPaiFIiMxP1Up7yHcsZ2NeECzLxRTXCO0mqXlujZwdJgFsFC"
        crossorigin="anonymous"></script>

ES Module (minified):


<script type="module" src="https://cdn.jsdelivr.net/npm/htmx.org@next/dist/htmx.esm.min.js"
        integrity="sha384-OPW5afG/4fljvTHsMqWvLnhClMkpDn0js3fDdgGseCQ5ijf4CgOH6yBk4Mh+Lsvb"
        crossorigin="anonymous"></script>

ES Module (unminified):


<script type="module" src="https://cdn.jsdelivr.net/npm/htmx.org@next/dist/htmx.esm.js"
        integrity="sha384-WhiGE30cpMIwAk95UYcKunr7TdMcxfJ9ECtjkYo8ghgAyYXtS9jA4c0TXkVcqBsM"
        crossorigin="anonymous"></script>

Method 2: Download

Instead of using a CDN, consider self-hosting in production.

  1. Download htmx.min.js
  2. Save it to your project (e.g., /js/htmx.min.js)
  3. Add this in your <head> tag:

<script defer src="/js/htmx.min.js"></script>
Other options

Unminified (for debugging):

Download: htmx.js


<script defer src="/js/htmx.js"></script>

ES Module (minified):

Download: htmx.esm.min.js


<script type="module" src="/js/htmx.esm.min.js"></script>

ES Module (unminified):

Download: htmx.esm.js


<script type="module" src="/js/htmx.esm.js"></script>

Method 3: npm

  1. Install htmx via npm:
npm install htmx.org@next
  1. Import htmx in your JavaScript:
import 'htmx.org';
Other options

Named import (for using the JavaScript API):

import htmx from 'htmx.org';

// Now you can use htmx.ajax(), htmx.find(), etc.