More from Henry Kim

RSS

Filter UI that syncs query params via Stimulus (no front-end router)

14791 views

0 comments

                  <form data-controller="query-sync" data-action="change->query-sync#apply">
  <select name="status" class="rounded border p-2">
    <option value="">Any</option>
    <option value="open">Open</option>
    <option value="closed">Closed</option>
  </select>
</form>

                  import { Controller } from "@hotwired/stimulus"
import { Turbo } from "@hotwired/turbo-rails"

export default class extends Controller {
  apply() {
    const url = new URL(window.location.href)
    const formData = new FormData(this.element)

    for (const [k, v] of formData.entries()) {
      if (v === "") url.searchParams.delete(k)
      else url.searchParams.set(k, v)
    }

    Turbo.visit(url.toString(), { action: "replace" })
  }
}

Filters are better when the URL reflects state. I use a small Stimulus controller that updates the query string as filters change, then triggers a Turbo visit (often with data-turbo-action='replace'). This gives shareable URLs and correct back-button behavior without pulling in a router. The server remains the source of truth for filtering logic, and the UI can still degrade to a normal GET form. The controller’s job is just to serialize inputs and update the URL; it doesn’t own filtering. This is also useful for multi-select filters and sorting. I keep it conservative: debounce changes, and don’t trigger visits if the query string didn’t actually change.

Henry Kim

More from Henry Kim

Filter UI that syncs query params via Stimulus (no front-end router)

0 Comments

More from Henry Kim