Hypermedia foundations
Add HTMX to a page
Load HTMX from a pinned script or installed package and verify the actual file is delivered before adding attributes.
8 minute lesson
For a page without a JavaScript build step, load the current pinned HTMX 2 distribution:
<script
src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.10/dist/htmx.min.js"
integrity="sha384-H5SrcfygHmAuTDZphMHqBJLc3FhssKjG7w/CeCpFReSfwBWDTKpkzPP8c+cLsK+V"
crossorigin="anonymous">
</script>Pinning makes the deployed bytes part of your release. The integrity hash lets the browser reject a CDN response that does not match those bytes. When you upgrade, update both the version and hash from the official documentation.
In a project with an asset pipeline, install htmx.org@2.0.10 and import the appropriate distribution entry. This lets your lockfile and dependency update process control the version.
Before adding attributes, open the browser Network panel and confirm the script returns 200. Then run htmx.version in the console. If it is undefined, fix loading first; changing hx-* markup cannot repair a missing library.
Avoid an unversioned CDN URL. It can change application behavior without a code change or deployment from you.
Lesson completed