htmx 4.0 is under construction — migration guide

Installation

Install htmx via CDN, npm, or direct download

htmx is a single JavaScript file with no dependencies. No build step is required to use it.

CDN

Add this in your <head> tag:

<script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-beta2" integrity="sha384-v+EMKtNUAo5enmQxBqgoU/FWvVvvZHvITNzurHSl4kzvCs94wdlgHUci1lliKWKz" crossorigin="anonymous"></script>

Unminified

<script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-beta2/dist/htmx.js" integrity="sha384-sxLOx04gZNKw/HpiJukyUwiM25Q5SdmvP3I36IHl6wSR4n68abzxLQHxeKKTk7Uq" crossorigin="anonymous"></script>

ES Module

<script type="module" src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-beta2/dist/htmx.esm.min.js" integrity="sha384-imtDMsKpIb5KDnuaceZPNUtGHemw6nZSQTAcVNpfegk47oSVnMbe0dp6civ/SA4s" crossorigin="anonymous"></script>

ES Module (unminified)

<script type="module" src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-beta2/dist/htmx.esm.js" integrity="sha384-6RhNnkQax3nr4qLjuAzvDdXPn1NfdLRySEzp1OlxCJn0i+nvn02WkqJ9Ctfc4WPi" crossorigin="anonymous"></script>

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 src="/js/htmx.min.js"></script>

Other formats

Download: htmx.js (unminified)

Download: htmx.esm.min.js (ES module)

Download: htmx.esm.js (ES module, unminified)

npm

npm install htmx.org@4.0.0-beta2
import 'htmx.org';

Named import

import htmx from 'htmx.org';

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

htmax

The htmax.js file bundles htmx with the most popular extensions in a single file:

The extensions are automatically available, you can just use their attributes directly (e.g. hx-sse:connect, hx-ws:connect).

<script src="/js/htmax.min.js"></script>