Nanostores
By Andrey Sitnik
Nanostores is a tiny, framework-agnostic state management library for JavaScript that stores application state in small atomic units and notifies subscribers only when the specific value they read changes. It is designed to work…
Definition
Nanostores is a tiny, framework-agnostic state management library for JavaScript that stores application state in small atomic units and notifies subscribers only when the specific value they read changes. It is designed to work identically across React, Vue, Svelte, and vanilla JavaScript, with a core small enough to be measured in a few hundred bytes, making it a common choice for performance-sensitive or size-constrained projects.
Overview
Nanostores was built around the idea that state management does not need to be tied to any particular UI framework, and that many applications benefit more from very small, composable units of shared state than from one large centralized store. It targets projects, particularly those built with tools like Astro that render across multiple frameworks on a single page, where a single state library needs to work identically regardless of which UI layer is consuming it. Mechanically, Nanostores' core primitive is the atom, created with a function that takes an initial value and returns a store object exposing get and set methods along with a subscribe method for reacting to changes. Beyond atoms, Nanostores provides map for storing and partially updating objects, and computed for deriving new stores from one or more existing stores, recalculating only when a dependency actually changes. Framework bindings, such as @nanostores/react's useStore hook, subscribe a component to a specific store and trigger a re-render only when that store's value changes, giving fine-grained reactivity without wrapping an entire component tree in a provider. Compared to Redux or even Zustand, Nanostores has almost no API surface: there are no reducers, no action types, and no middleware system, just stores that can be read, written, and subscribed to directly. Compared to Effector, which offers a similarly framework-agnostic model but with an extensive vocabulary of events, effects, and domains for complex flows, Nanostores stays deliberately minimal, leaving complex async orchestration to be built by hand or through smaller companion packages. In practice, Nanostores is used heavily in the Astro ecosystem for sharing state between islands built with different frameworks on the same page, and more broadly in projects that want simple global state without adopting a heavier state-management library, such as small to medium web apps, browser extensions, or component libraries meant to be framework-neutral. The primary trade-off with Nanostores is that its minimalism means teams needing built-in support for complex async coordination, time-travel debugging, or a rich developer-tools ecosystem will need to build or adopt supplementary tooling rather than getting it out of the box, unlike Redux's mature DevTools integration. For applications with straightforward state-sharing needs across one or more frameworks, however, Nanostores' small footprint and simple, easy-to-audit API remain its main selling points over the more feature-rich, higher-overhead alternatives available in today's broader JavaScript and TypeScript state-management ecosystem, especially for size-conscious teams shipping performance-sensitive products to the open web.
Key Features
- Core library measures only a few hundred bytes gzipped
- Provides atom, map, and computed store primitives
- Works identically across React, Vue, Svelte, and vanilla JavaScript
- Enables fine-grained subscriptions without a provider wrapper
- Supports deriving computed stores from other stores automatically
- Requires no reducers, action types, or middleware system
- Commonly used to share state across Astro's multi-framework islands