state-in-url
Store any user state in query parameters; imagine JSON in a browser URL.
FreeHelpersOpen Source1,236 impressions#13 of its week
state-in-url stores typed React state in the URL query string for deep linking and sharing.
- for
- React developers using Next.js, React Router, Remix or Astro who need URL-based state sharing.
- pricing
- open source
- license
- MIT
- v6.0.2v6.0.2 a year ago
- v5.2.0v5.2.0 More convenient reset optiona year ago
- v5.0.0v5.0.0 Remix supporta year ago
Key features
- Typed state in URL — Preserves full TypeScript types and structure when syncing state to the query string.
- Framework agnostic hooks — Provides useUrlState hooks for Next.js, React Router, Remix and Astro.
- Zero runtime dependencies — The library is ~2 KB gzipped and has no external runtime dependencies.
- History-aware updates — First navigation pushes a history entry, subsequent updates replace it to keep history clean.
- Sync with form libraries — Integrates with react-hook-form or Formik to keep forms in sync with URL state.
- Server Component support — Works in Next.js Server Components without requiring Suspense boundaries.
Use cases
- Share filter settings via a bookmarkable URL
- Synchronize form values across unrelated components without a provider
- Persist pagination, sorting or date ranges across page reloads
state-in-url FAQ
Why keep React state in the URL?+
It makes the state shareable via links, enables back/forward navigation and lets unrelated components read the same values without a provider.
What kind of data should be stored in the URL?+
Values that are useful to bookmark or share such as filters, sorting, pagination, active tabs or date ranges; avoid private, large or transient data.
Does URL state survive a page refresh?+
Yes, because the state lives in the query string; reloading, bookmarking or pasting the link restores the same state.
Can it be used with Next.js Server Components?+
Yes, the hook never calls useSearchParams, so no Suspense boundary is needed and it works with prerendering.
How does it integrate with form libraries?+
Seed the form library with urlState as default values and mirror changes using setUrl, keeping the form and URL in sync.
Summarized by DevHunt from state-in-url.dev · Sep 29, 2026. Details may change; check the official site.
