HTMX Setup and Installation

One of HTMX's greatest strengths is how easy it is to add to any project. You do not need Node.js, npm, a bundler, or any build tool. You add one line to your HTML, and HTMX is ready to use. This topic covers every way to get HTMX into your project.

Method 1: CDN Script Tag (Fastest)

The simplest way to use HTMX is to load it from a Content Delivery Network (CDN). A CDN stores the HTMX file on servers around the world so it reaches your visitors quickly, no matter where they are.

Add this tag inside the <head> section of your HTML page:

<script src="https://unpkg.com/htmx.org@2.0.0"></script>

That single line is all you need. HTMX loads automatically when the page opens, and every HTMX attribute you add to your HTML starts working immediately.

What a CDN Does

  Visitor in India         ---->  Nearest CDN server (Mumbai)
  Visitor in Germany       ---->  Nearest CDN server (Frankfurt)
  Visitor in USA           ---->  Nearest CDN server (New York)

  All visitors get HTMX fast — no matter their location.

Method 2: Download and Self-Host

If your project runs without internet access, or if you want full control over the file, you can download HTMX and host it yourself.

Visit htmx.org and download the latest htmx.min.js file.
Place it in your project's static files folder (for example, /static/js/htmx.min.js).
Reference it with a script tag in your HTML:

<script src="/static/js/htmx.min.js"></script>

Self-hosting gives you a predictable file with no dependency on an external service.

Method 3: npm Install

If your project already uses npm (for example, with a Node.js or Vite setup), you can install HTMX as a package:

npm install htmx.org

After installation, import HTMX in your JavaScript entry file:

import 'htmx.org';

This approach works well when HTMX is one tool among many in a larger front-end build.

Verifying the Installation

After adding the script tag, open your browser's developer console (press F12, then click the Console tab). Type this command:

htmx.version

If HTMX loaded correctly, the console prints the version number — for example, "2.0.0". If you see an error or undefined, the script tag has a typo or the file did not load.

  Developer Console
  -------------------
  > htmx.version
  "2.0.0"       <-- HTMX is loaded and ready

Placement of the Script Tag

Where you place the script tag matters. Two positions are common:

Option A: Inside the Head Tag

<head>
  <meta charset="UTF-8">
  <title>My Page</title>
  <script src="https://unpkg.com/htmx.org@2.0.0"></script>
</head>

HTMX loads before the page content. No chance of a user interacting with an element before HTMX is ready.

Option B: Before the Closing Body Tag

  </main>
  <script src="https://unpkg.com/htmx.org@2.0.0"></script>
</body>

The page content loads first and appears faster to the user. HTMX loads last. This is fine for most sites because page interactions rarely happen within milliseconds of the page opening.

For most HTMX projects, placing the script in the <head> is the safer and simpler choice.

A Minimal Working HTML Page

Here is the smallest possible HTML file that includes HTMX and is ready for you to write your first attribute:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My HTMX Project</title>
  <script src="https://unpkg.com/htmx.org@2.0.0"></script>
</head>
<body>
  <h1>Hello, HTMX!</h1>
</body>
</html>

Save this file, open it in a browser, and you have a working HTMX environment.

HTMX and Content Security Policy

Some websites use a Content Security Policy (CSP) — a set of rules that controls which scripts the browser is allowed to run. If your site uses a strict CSP, you may need to add the CDN domain to your allowed sources list, or switch to self-hosting so the script comes from your own domain.

If HTMX stops working after you add a CSP, check the browser console for errors mentioning "Refused to load script." That confirms a CSP conflict, and you adjust the policy to permit HTMX.

Updating HTMX

When a new version of HTMX releases, update the version number in your script tag:

<!-- Old version -->
<script src="https://unpkg.com/htmx.org@1.9.12"></script>

<!-- Updated version -->
<script src="https://unpkg.com/htmx.org@2.0.0"></script>

Always check the HTMX changelog before updating in a production project. Newer versions occasionally change default behavior.

Key Takeaway

Installing HTMX takes one line of HTML. Use the CDN link for quick projects, self-host for production reliability, or install via npm for larger build pipelines. Confirm the install with htmx.version in the browser console. Once you see the version number, your environment is ready for everything that follows in this course.

Previous lesson

Back to course

Next lesson