state-in-url

state-in-url is a TypeScript-first library designed to store and synchronize application state directly in the browser URL, preserving both the structure and types of the data. It enables developers to represent complex state—such as objects, arrays, and dates—in the query string, allowing every state to be shareable via a URL and persistent across page reloads. The tool aims to eliminate boilerplate and the need for providers, offering a streamlined API that mirrors React's useState, but with the URL as the backing store.

This hook allows components to read from and write to the URL's query parameters, ensuring that changes in state are immediately reflected in the URL and vice versa. Developers can define their application's state using TypeScript types, ensuring type safety throughout the process. The tool supports updating state both immediately and on demand, syncing changes to the URL as needed. It also allows for the creation of reusable custom hooks for managing slices of state, and includes helpers like encodeState and decodeState for use in other frameworks or plain JavaScript.

state-in-url is lightweight, with a gzipped size of approximately 2 KB and no dependencies. It is distributed under the MIT license and can be installed via npm. The tool is tested with unit and cross-browser end-to-end suites, emphasizing reliability. It is suitable for developers seeking to build deep links, share stateful URLs, and synchronize state across unrelated client components without additional setup or context providers. The library is open source, and its source code is available for review and contribution.