nanostores

A tiny (~1kb), framework-agnostic state manager built for the era of many small stores.

nanostores

General JS

A tiny (~1kb), framework-agnostic state manager built for the era of many small stores.

npmGitHubDocs

Fit

Bundle (gzip)

2.2 kB

4.9 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Sharing state across React, Vue, Svelte, and vanilla islands — common in Astro and micro-frontend setups — usually means a different store for each framework and a lot of bundle weight for something conceptually simple.

What It Does

Nanostores provides atoms and maps in around a kilobase, with official bindings for React, Preact, Vue, Svelte, Solid, and vanilla JS. Stores are tree-shakeable and lazy, so unused state costs nothing, making it ideal for multi-framework and edge-rendered apps.

Installation

bash
npm install nanostores

Usage Example

js
import { atom } from 'nanostores';
import { useStore } from '@nanostores/react';

export const $counter = atom(0);

export function Counter() {
  const count = useStore($counter);
  return <button onClick={() => $counter.set($counter.get() + 1)}>{count}</button>;
}

Related packages

ai (Vercel AI SDK)General JS

Unified TypeScript SDK for building AI-powered apps — switch between 20+ LLM providers without rewriting code.

animejsGeneral JS

Lightweight JavaScript animation library with a tiny footprint and a powerful, expressive API.

AOSGeneral JS

An easy-to-use library that makes elements fade, slide, or zoom into view as the user scrolls down your page.

archiverGeneral JS

Streaming interface for generating ZIP and TAR archives in Node.js — create compressed archives programmatically from files, directories, and buffers.

@formkit/auto-animateGeneral JS

> Add smooth transitions to any element with a single line — zero-config animations for adds, removes, and moves.