Using HTMX boosted links in my 11ty website

Published on Jul 25, 2025

For the past month I have been trying out HTMX for some small experiments. While skimming through the Hypermedia Systems book, the one written by the HTMX' creator himself, I found out about boosted links.

Boosted links work by halting the default behavior of links where a request is done and the entirety of the page is replaced, to instead issuing a AJAX request and only replacing the body tag.

<!-- targetted to a single element -->
<a href="/about" hx-boost="true">About</a> 

<div hx-boost="true"> <!-- all children will be boosted -->
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</div>

This in practice means that the resources declared in the head won't need to be fetched again, hence making a smoother transition between the pages. This concept isn't necessarily new, as SPAs have been providing similar behavior for some years already. However, for websites with content statically generated or server-side this is not the default behavior.

This blog, for instance, is generated with 11ty which is an amazing tool for generating static websites. However, everytime users navigated between internal links they need to fully load each page.

So, I've decided to install HTMX in this website and boost all the links. Have you've noticed?

If you want to feel the difference between the two, open your network tab and:

1. Navigate to this non-boosted link
2. Navigate to this boosted one

Caveats

Keep in mind that if you have any scripts or styles defined in the head tag they won't get loaded. So you might need to declare them inside the body of your page. The title tag is the only one that gets updated.