{"library":"nanostores","title":"Nano Stores","description":"Nano Stores is a lightweight and performant state manager designed for a wide range of JavaScript frameworks including React, Preact, Vue, Svelte, and vanilla JS. Currently stable at version 1.3.0, the library maintains an active release cadence, frequently introducing new features and improvements. Its core philosophy revolves around using many atomic, tree-shakable stores and direct manipulation, which contributes to its incredibly small footprint (294-831 bytes minified and brotlied) and zero external dependencies. Key differentiators include its focus on moving business logic out of components into dedicated stores, optimizing for speed by avoiding unnecessary selector calls, and providing first-class TypeScript support. This architecture ensures excellent tree-shaking, only bundling the stores actually used in a given chunk.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install nanostores"],"cli":null},"imports":["import { atom } from 'nanostores'","import { computed } from 'nanostores'","import { useStore } from '@nanostores/react'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"interface Task {\n  id: string;\n  text: string;\n  completed: boolean;\n}\n\nimport { atom, computed } from 'nanostores';\n\n// 1. Create an atomic store using `atom`\nexport const $tasks = atom<Task[]>([]);\n\n// 2. Define actions to manipulate the store\nexport function addTask(text: string) {\n  const newTask: Task = {\n    id: String(Date.now()),\n    text,\n    completed: false\n  };\n  $tasks.set([...$tasks.get(), newTask]);\n  console.log(`Added task: \"${text}\"`);\n}\n\nexport function toggleTask(id: string) {\n  $tasks.set($tasks.get().map(task =>\n    task.id === id ? { ...task, completed: !task.completed } : task\n  ));\n  console.log(`Toggled task with ID: ${id}`);\n}\n\n// 3. Create a derived store using `computed`\nexport const $pendingTasksCount = computed($tasks, tasks =>\n  tasks.filter(task => !task.completed).length\n);\n\n// 4. Subscribe to store changes\nconsole.log('--- Initial State ---');\nconsole.log('Tasks:', $tasks.get());\nconsole.log('Pending count:', $pendingTasksCount.get());\n\nconst unsubscribeTasks = $tasks.listen(currentTasks => {\n  console.log('\\n--- Tasks Updated ---');\n  console.log('Current tasks:', currentTasks.map(t => `${t.text} (${t.completed ? 'Done' : 'Pending'})`).join(', '));\n});\n\nconst unsubscribePendingCount = $pendingTasksCount.listen(count => {\n  console.log('Current pending tasks count:', count);\n});\n\n// 5. Trigger actions to see state changes\naddTask('Learn Nano Stores');\naddTask('Build a cool app');\ntoggleTask($tasks.get()[0]?.id || '');\n\nsetTimeout(() => {\n  addTask('Review documentation');\n  toggleTask($tasks.get()[1]?.id || '');\n  console.log('\\n--- Final State after Timeout ---');\n  console.log('Tasks:', $tasks.get().map(t => `${t.text} (${t.completed ? 'Done' : 'Pending'})`).join(', '));\n  console.log('Pending count:', $pendingTasksCount.get());\n\n  // Clean up subscriptions (important in real apps)\n  unsubscribeTasks();\n  unsubscribePendingCount();\n}, 200);\n","lang":"typescript","description":"This example demonstrates creating an atomic store with `atom`, defining actions to modify it, deriving state with `computed`, and subscribing to changes using `listen` to observe state updates.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}