htmx: Installing htmx

Installing htmx can be as simple as adding a <script> tag to an HTML page that loads htmx from a global CDN, like this:

<script src="https://unpkg.com/[email protected]"></script>

You can also save the htmx code locally on your website and load it from there. Or reference https://unpkg.com/htmx.org which gives you the latest version (but adds a redirect) - if you choose this route it’s probably safer to use https://unpkg.com/htmx.org@1 to stick to htmx 1.x in case 2.x is released with breaking changes.

In a modern site built for example with Astro you typically do this in a common layout component, but you can start simple and add it to a simple index.html page that you then load in the browser from your local filesystem.

You can also install htmx using npm to add it to your build system and use the import syntax to load it:

npm install htmx.org

//....in your code...

import 'htmx.org'

But I think the <script> tag approach is best suited for htmx.

Lessons in this unit:

0: Introduction
1: Why htmx
2: The core idea of htmx
3: ▶︎ Installing htmx
4: Doing a GET request
5: Swap
6: POST request
7: Targets
8: Loading indicator
9: Confirming actions, and prompts
10: Triggers
11: Request headers
12: Response headers
13: Events
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!