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-beta4" integrity="sha384-aWZK1NtOs/aWb/+YZdTM8q2JkWEshlMc9mgZ189numT9bwFhyAyYEoO4nO/2dTXt" crossorigin="anonymous"></script>Unminified
<script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-beta4/dist/htmx.js" integrity="sha384-OFLRIZpuqI2wwFozxvDGcuF3TQ36ySMgp44WEthOiR4wFzRkhZbK72HFaBo2C3cx" crossorigin="anonymous"></script>ES Module
<script type="module" src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-beta4/dist/htmx.esm.min.js" integrity="sha384-md54RSbheZ0Mpr9oo11vo7Cvrz9acwqg8tSLEoFeo1R6FsZmD3jFVKokISxCeT6Q" crossorigin="anonymous"></script>ES Module (unminified)
<script type="module" src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-beta4/dist/htmx.esm.js" integrity="sha384-S5fILq7gG/U3b/j34NWMf77PgT3ojxi6CQxRFhqRLklkKJ+3KujL7RaZOgV2cmkz" crossorigin="anonymous"></script>Download
Instead of using a CDN, consider self-hosting in production.
- Download htmx.min.js
- Save it to your project (e.g.,
/js/htmx.min.js) - 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-beta4
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>