Store any user state in query parameters; imagine JSON in a browser URL, while keeping types and structure of data, e.g.numbers will be decoded as numbers not strings. With TS validation. Shared state and URL state sync without any hassle or boilerplate. Supports Next.js@14-16, react-router@6-7, and Remix@2.
This repository also configures its own agents. See what state-in-url tells them →
Skill Codex needs its repo
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states.…
Skill Claude CodeCodex needs its repo
Set up useUrlState in Astro (state-in-url/astro) inside React islands, and keep state in the URL on pages with no client framework at all through encodeState/decodeState in the frontmatter. Covers the searchParams island prop for a matching server render, sharing state between islands, and the replace/push choice with…
Skill Claude CodeCodex
Define typed, module-scoped state and wrap useUrlState in a feature-scoped custom hook so unrelated React components share the same URL-synced state. Covers drawer/modal open-state, tab switching, multi-select toggles, reset/defaults semantics, and the object-identity-based sharing model. Load this skill when storing…
Skill Claude CodeCodex
Use the URL as a form draft store by pairing useUrlState with react-hook-form (or formik). Share one module-scoped defaults object between both libraries; hydrate useForm.defaultValues from urlState; push form changes back into setUrl via RHF subscribe() (NOT watch()). Load this skill when a form should round-trip its…
Skill Claude CodeCodex
Reconcile instant local input feedback with URL write throttling. setState updates internal state synchronously (instant re-render); setUrl is throttled and asynchronous (URL catches up on the next tick). Use this skill for text inputs, search boxes, sliders, range pickers, and any control that fires many updates per…
Skill Claude CodeCodex
SSR-safe useUrlState in Next.js App Router. Forward searchParams from server pages (awaiting the Promise in Next.js 15+) rather than calling useSearchParams(), decide between useHistory true/false, keep pages prerenderable, and use a Proxy (formerly middleware) to expose query params to server layouts. App Router only…
Skill Claude CodeCodex
Put state in the URL in a plain React app with no router — Vite, Create React App, a widget mounted into someone else's page — with useUrlState from state-in-url/react. Covers why no useUrlState is exported from the package root (every one is tied to a framework), the cross-component sharing model that makes prop…
Skill Claude CodeCodex
Set up useUrlState for React Router v7 (state-in-url/react-router), React Router v6 (state-in-url/react-router6 — moved here in 6.0.0), and Remix v2 (state-in-url/remix). The hook API is identical across all three; only the import path and per-call NavigateOptions (preventScrollReset, state, replace) differ. Load this…
Skill Claude CodeCodex
Use useSharedState (from state-in-url, NOT a framework subpath) as a framework-agnostic cross-component state primitive when URL sync is explicitly NOT wanted. Same module-scoped default-state-identity rule as useUrlState. A lightweight Context.Provider replacement that works in React, Next.js, Vite, Remix without…
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: