# nanostores-devtools

> Inspect Nano Stores state in Redux DevTools. Every store is named after your code, with no setup per store.

- URL: https://evilmartians.com/opensource/nanostores-devtools
- GitHub: https://github.com/psd-coder/nanostores-devtools
- Website: https://nanostores-devtools.psdcoder.dev/
- Authors: Pavel Grinchenko

---

nanostores-devtools shows Nano Stores state in the Redux DevTools browser extension. A bundler plugin reads your source during development and gives each store the name you wrote for it. Every store becomes a key in one state tree, and every write appears as a named row in the timeline.

*Image: Redux DevTools showing Nano Stores state. The left column lists actions such as syncStatus/set and addMessages/mount. The right pane shows a tree grouped by source file, where stores/media-queries.ts holds mobileMedia, pageTheme and other stores with their values.*

* **Named stores.** Each store gets the name of its variable, object key, array index, or `Map` key. You don't call anything per store.
* **One row per change.** The timeline shows writes like `$counter/set` and `$user/setKey:name`, with a diff and a stack trace that points at the line that wrote the value.
* **Read-only.** The browser side never calls `store.get()`, never reads your getters, and never mounts a store.
* **Vite, webpack, and Rspack.** The plugin only runs in development builds. A production build gets three empty functions.
* **Free when closed.** While there isn't a DevTools panel open, it costs nothing for the page.

```ts
// vite.config.ts
import { defineConfig } from "vite"
import { nanostoresDevtools } from "nanostores-devtools/vite"

export default defineConfig({
  plugins: [nanostoresDevtools()],
})
```

```ts
// src/main.ts
import { connectDevtools } from "nanostores-devtools"

connectDevtools({ name: "my-app" })
```

The API, a description of how store discovery works, and troubleshooting notes are at [nanostores-devtools.psdcoder.dev](https://nanostores-devtools.psdcoder.dev/).