URL-Driven State in HTMX

Forget complex state libraries. Use the URL as your single source of truth for filters, sorting, and pagination in HTMX applications

Bookmarkable by Design: URL-Driven State in HTMX

When you move from React to HTMX, you trade complex state management for server-side simplicity. But you still need to handle filters, sorting, pagination, and search. Where does that state live now?

The answer is surprisingly elegant: in the URL itself. By treating URL parameters as your single source of truth, you get bookmarkable, shareable application state without needing to install another dependency.

The Pattern in Action

A URL like /?status=active&sortField=price&sortDir=desc&page=2 tells you everything about the current view. It’s not just an address: it’s a complete state representation that users can bookmark, share, or refresh without losing context.

Quick Start: Three Essential Steps

The entire pattern revolves around three synchronized steps:

Server reads URL parameters and renders the appropriate view Forms and hx-include preserve all state when making HTMX requests Browser URL updates automatically with hx-push-url

Let’s build this step by step.

... continue reading