mbk/twopn
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

post: hx-boost

Browse source
This commit is contained in:
mehbark 2026-01-27 23:24:51 -05:00
parent 42a9f2a467
commit ec46f5631e
Signed by: mbk
GPG key ID: E333EC1335FFCCDB
1 changed files with 26 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
site-src/hx-boost.mdx Normal file
View file

@ -0,0 +1,26 @@
---
title: I recommend hx-boost
description: 'How I added `hx-boost` to make my website slightly nicer and how you can too'
tags: post,short
date: 2026-01-27 22:53:23 -5
---
[`hx-boost`](https://htmx.org/attributes/hx-boost) is an attribute provided by [htmx](https://htmx.org) that makes your website better with no downside.
Really! As the page in the documentation describes, it makes `<a>`s that point within your website use AJAX.
It swaps the body and pushes a history state, so it works exactly like an anchor normally does from the user's perspective.
This might sound like overcomplicating things with JavaScript for a *potential* speed improvement, but the reason you should highly consider it is the [`hx-preserve`](https://htmx.org/attributes/hx-preserve/) attribute.
Put that (and a unique `id`) on content that you don't want to change when you navigate between pages, like a sidebar.
Now things like GIFs will keep playing and there won't be flashes when things that should be static are refreshed.
Importantly, literally nothing changes for (cool) users who (righteously) block JavaScript.
It is perfect [progressive enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement).
## Steps
1. Add htmx to your `<head>`: `<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>`.
2. Add `hx-boost="true"` to your `<body>`.
3. Add `hx-preserve="true"` to stuff that is static between pages (probably a sidebar/footer). Add a unique `id` if it doesn't already have one.
4. Be happy that it works with and without JavaScript.
It really is that easy! [Here's the commit where I added it to my site](https://git.pyrope.net/mbk/twopn/commit/42a9f2a467ee15c398e1bc5fac1296b6befb4878).