State management. Frontend

Managing state in URL.

Workflow: Updating URL state

  1. Identify UI variables (page, filters, sorts).

  2. Map variables to an hx-vals JSON object using the {% hx_urlstate %} tag.

  3. Attach hx-vals to the triggering element to merge with current URL state.

Workflow: Using hx_urlstate template tag

  1. {% load urlstate %} in your template.

  2. Replace hx-vals='{"page": "{{ page_num }}", "order_by": "{{ ... }}", ...}' with hx-vals='{% hx_urlstate request.GET page=page_num %}'.

  3. The tag automatically forwards all existing URL query params and lets you override specific keys.

  4. Adding a new URL param to your views automatically propagates to all hx-vals without template changes.