Getting started

A store is a plain JavaScript module. Components only read it.

Install

npm install nanostores

Create a store

atom keeps one value. Actions that change it are plain functions next to the store.

stores/users.ts

import { atom } from 'nanostores'

export interface User {
  name: string
  isAdmin: boolean
}

export const $users = atom<User[]>([])

export function addUser(user: User) {
  $users.set([...$users.get(), user])
}

Derive a value

computed recalculates when the stores it depends on change.

stores/admins.ts

import { computed } from 'nanostores'
import { $users } from './users'

export const $admins = computed($users, (users) =>
  users.filter((user) => user.isAdmin),
)

Read it in a component

Install the adapter for your framework. The component re-renders when $admins changes.

React

npm install @nanostores/react

components/Admins.tsx

import { useStore } from '@nanostores/react'
import { $admins } from '../stores/admins'

export function Admins() {
  const admins = useStore($admins)
  return (
    <ul>
      {admins.map((user) => (
        <li key={user.name}>{user.name}</li>
      ))}
    </ul>
  )
}

Vue

npm install @nanostores/vue

Admins.vue — <script setup lang='ts'>

import { useStore } from '@nanostores/vue'
import { $admins } from '../stores/admins'

const admins = useStore($admins)

Use admins in the template as a regular ref.

Vanilla JS

No adapter needed: subscribe calls the callback right away and on every change.

admins.ts

import { $admins } from '../stores/admins'

const list = document.querySelector('#admins')!

$admins.subscribe((admins) => {
  list.replaceChildren(
    ...admins.map((user) => {
      const item = document.createElement('li')
      item.textContent = user.name
      return item
    }),
  )
})

Svelte, Solid, Lit, Angular, Alpine.js and Web Components: see Frameworks.

Next

• Lazy stores: load data only while a component listens.
• Move logic from components to stores
• API reference