Nanostores State

Share state across frameworks with Nanostores — a tiny (under 1KB) atomic store. Builds atoms, maps, and computed stores that work in React, Vue, Svelte, Solid, and Astro islands, ideal for cross-island and cross-framework state.

This skill helps you manage lightweight, framework-agnostic state with Nanostores. It creates atoms, maps, and computed stores, wires framework bindings (@nanostores/react, /vue, /solid), persists state, and keeps it tree-shakable — the go-to for sharing state between Astro islands or multiple micro-frontends without a heavy runtime.

When to use

Use when state must cross framework or island boundaries — Astro islands, multi-framework apps, or micro-frontends — or when you want the smallest possible store with atoms and computed values.

Examples

Shared cart across Astro islands

State that survives island boundaries

Create a Nanostores cart store shared between two Astro React islands so adding an item in one updates the badge in the other

Persisted computed store

Derive and persist state

Build a Nanostores atom for theme with a computed store for CSS variables and persist the choice with @nanostores/persistent