Nanostores Has a Free API That Most Developers Don't Know About

Nanostores is a tiny (286 bytes) state management library that works with React, Vue, Svelte, Angular, and vanilla JS. Perfect for framework-agnostic shared state.

Basic Atoms

import { atom, computed } from "nanostores";

export const $count = atom(0);
export const $double = computed($count, c => c * 2);

// Update from anywhere
$count.set(5);
$count.set($count.get() + 1);

React Integration

import { useStore } from "@nanostores/react";
import { $count, $double } from "./stores";

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

Vue Integration

<script setup>
import { useStore } from "@nanostores/vue";
import { $count } from "./stores";
const count = useStore($count);
</script>
<template><button @click="$count.set(count + 1)">{{ count }}</button></template>

Map Store (Objects)

import { map } from "nanostores";

export const $user = map({ name: "", email: "", loggedIn: false });

// Update specific keys
$user.setKey("name", "Alice");
$user.setKey("loggedIn", true);

Lifecycle (Lazy Loading)

import { onMount } from "nanostores";

export const $posts = atom([]);

onMount($posts, () => {
  // Runs when first subscriber connects
  const unsubscribe = api.subscribeToPosts(posts => $posts.set(posts));
  return () => unsubscribe(); // Cleanup when last subscriber leaves
});

Key Features

• 286 bytes — smallest state lib available
• Framework agnostic — React, Vue, Svelte, Angular
• Computed stores with automatic dependency tracking
• Lifecycle hooks for lazy data loading
• TypeScript-first

---

Need to scrape or monitor web data at scale? Check out my web scraping actors on Apify — ready-made tools that extract data from any website in minutes. Or email me at [e-mail] for custom solutions.