Nanostores — Tiny State Manager for Any Framework

Introduction

Nanostores is a minimalist state management library designed to work across any JavaScript framework. At under 1kB, it provides atoms for simple values, maps for key-value objects, and computed stores for derived state. Official integrations exist for React, Vue, Svelte, Solid, Lit, and Angular, making it an ideal choice for multi-framework projects or micro-frontend architectures.

What Nanostores Does

• Manages shared state with atom, map, and deepMap store primitives
• Derives computed values that update automatically when dependencies change
• Provides framework bindings that subscribe components to store changes
• Supports lazy initialization with lifecycle hooks for mount and unmount
• Handles async data loading through the @nanostores/query addon

Architecture Overview

Nanostores uses a publish-subscribe model where each store is an observable container. When a store value changes, all subscribers are notified synchronously. Computed stores track their dependencies automatically and recalculate only when inputs change. Framework integrations use the subscribe API to bridge stores with each framework's reactivity system.

Self-Hosting & Configuration

• Install the core package plus a framework-specific binding package
• Create store files that export atoms and computed stores
• Import and use stores directly in components via framework hooks
• No provider wrappers or context setup required
• TypeScript types are inferred automatically from store definitions

Key Features

• Under 1kB core with zero dependencies
• Works with React, Vue, Svelte, Solid, Lit, Angular, and vanilla JS
• Atom, map, and deepMap primitives for different data shapes
• Lazy store initialization that activates only when subscribed
• Built-in router store for lightweight client-side routing

Comparison with Similar Tools

• Zustand — React-specific with larger API; Nanostores is framework-agnostic
• Jotai — React-only atomic state; similar atom concept but tighter React coupling
• Pinia — Vue-specific store; richer devtools but locked to Vue ecosystem
• Valtio — proxy-based state with React focus; mutable API style

FAQ

Q: Why choose Nanostores over Zustand or Jotai? A: Nanostores works across multiple frameworks, making it the go-to choice for shared state in micro-frontend or multi-framework projects.

Q: Can I use Nanostores for server-side rendering? A: Yes. Stores are plain JavaScript objects that work in any environment. Framework bindings handle SSR hydration automatically.

Q: How does lazy initialization work? A: Stores with onMount callbacks only activate when a component subscribes. When all subscribers disconnect, the cleanup function runs.

Q: Is Nanostores suitable for large applications? A: Yes. The modular store-per-feature pattern scales well, and computed stores handle derived state efficiently.

Sources

• https://github.com/nanostores/nanostores
• https://github.com/nanostores/nanostores#guide