Add HTMX to a page

Before you add any hx-* attributes, load the library and confirm it is actually running. A missing script is the fastest way to waste an afternoon debugging markup that never had a chance to work.

For a page without a JavaScript build step, load the latest HTMX 2.x release:

<script
  src="https://cdn.jsdelivr.net/npm/htmx.org@2/dist/htmx.min.js">
</script>

The @2 part keeps the URL on HTMX 2 while allowing patch and minor updates. I prefer that over pinning an exact patch version in a CDN URL.

In a project with an asset pipeline, install htmx.org@2 and import the distribution entry your bundler expects:

npm install htmx.org@2

Your lockfile records the exact version the project uses. That is the version you should test against.

Before adding attributes, open the browser Network panel and confirm the script returns 200. Then run htmx.version in the console. You should see a version string like 2.0.4. If it is undefined, fix loading first. Changing hx-* markup cannot repair a missing library.

Avoid an unversioned CDN URL. A future major release could introduce breaking changes, and your page would pick them up on the next visitor load without you noticing.

One failure I see often: the script tag is present but blocked by a Content Security Policy. The page looks fine, HTMX attributes are in the HTML, and nothing happens on click. Check the console for CSP errors before you blame the server route.

Place the script before your closing </body> tag or defer it consistently with the rest of your page. HTMX only needs to load once per document.

Try this on your own project: add the script, reload, and confirm htmx.version in the console before you write a single hx-get.