Boosted navigation
Three ordinary pages with ordinary links. htmx turns the clicks into fetches, swaps the body, and keeps the timer running.
Home
This is a tiny site inside the demo site. Click About or FAQ above. The URL changes, the title changes, the page changes. But it never reloads, and the timer on the right keeps counting.
What to look at
The nav has hx-boost:inherited="true". Every link inside it becomes an htmx request. htmx fetches the full page, takes the <body> from the response, swaps it in, and pushes the URL to history. Back and forward work.
The timer has hx-preserve and an id. htmx keeps that exact element across the swap. Its Alpine state, the running interval, all of it survives. That is the one thing a full page load can never do.
The little slide when you navigate is the View Transitions API. One config flag, transitions: true, and some CSS for ::view-transition-new(root).
Turn JavaScript off and the links still work. They are plain <a href> tags. Boosting is an enhancement, not a requirement.