From ec46f5631e5d5dddd045be1804874af32c674880 Mon Sep 17 00:00:00 2001 From: mehbark Date: Tue, 27 Jan 2026 23:24:51 -0500 Subject: [PATCH] post: hx-boost --- site-src/hx-boost.mdx | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 site-src/hx-boost.mdx diff --git a/site-src/hx-boost.mdx b/site-src/hx-boost.mdx new file mode 100644 index 0000000..38c5a60 --- /dev/null +++ b/site-src/hx-boost.mdx @@ -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 ``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 ``: ``. +2. Add `hx-boost="true"` to your ``. +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). + +