Features
- Framework-agnostic (React, Vue, Svelte, Solid, Angular)
- Atomic stores with computed values
- Lifecycle hooks (onMount, onSet)
- Ultra-tiny size (~300 bytes per store type)
- Maps, deep maps, and computed stores
Pros
- Works with any framework — ideal for shared libraries
- Smallest state library by bundle size
- Simple mental model with atom/map/computed
Cons
- Minimal tooling and DevTools
- Less feature-rich than framework-specific solutions
- Small community
Overview
Nanostores is a tiny state management library designed to be framework-agnostic. Each store type (atom, map, deepMap, computed) is around 300 bytes, making it the smallest state management option available. It provides bindings for React, Vue, Svelte, Solid, Lit, and Angular.
Nanostores is particularly popular in the Astro ecosystem, where its framework-agnostic nature lets you share state between islands built with different frameworks. The API is straightforward: atoms hold single values, maps hold key-value objects, and computed stores derive values from other stores.
When to Use
Nanostores is the right choice when you need state shared across different frameworks (e.g., Astro islands), when bundle size is critical, or when building framework-agnostic libraries that need lightweight state management.
Getting Started
npm install nanostores @nanostores/reactimport { atom, computed } from "nanostores";
import { useStore } from "@nanostores/react";
const $count = atom(0);
const $doubled = computed($count, (count) => count * 2);
function Counter() {
const count = useStore($count);
const doubled = useStore($doubled);
return (
<button onClick={() => $count.set(count + 1)}>
Count: {count} (doubled: {doubled})
</button>
);
}