History, errors, and enhancement
Push a URL into history
Give a substantial content change a shareable location and make back and forward navigation restore it.
8 minute lesson
Push history when an interaction creates a navigable state, not for every DOM change:
<a href="/tasks?status=complete"
hx-get="/tasks?status=complete"
hx-target="#task-view"
hx-push-url="true">
Completed tasks
</a>
After the swap, the address bar contains the fetched URL. HTMX snapshots the current page state before navigation so the Back button can restore it. If the snapshot is unavailable, HTMX requests the URL with HX-History-Restore-Request: true.
Every pushed URL must work when pasted into a new tab or refreshed. That route should return a complete document for ordinary navigation and enough page HTML for history restoration, not only the inner list fragment.
You can set hx-push-url to an explicit URL when the request route and public location differ. Keep that mapping rare and obvious; otherwise the Network request, browser location, and server routing become hard to reason about.
Do not push transient states such as “menu open” or “save indicator visible.” Push search, filters, pagination, or selected resources that people may share and revisit. Test direct load, refresh, Back, and Forward—not only the forward click.
Lesson completed