Record a Zustand bug once.

Replay the bug, inspect the exact state path that changed, and hand your teammate a session they can inspect.

Install from Chrome Unlock Pro

Status readout

release: public
install: Chrome Web Store
price: €9.99 one-time
privacy: zero telemetry

reproduce the bug in your app
record every state change
locate the path and call-site

applocalhost:3000

Relay Supply user: Ada / logged out

Desk lamp
€39

Mech keyboard
€129

cart total€0

The app: a plain storefront with two Zustand stores

DevToolsZustand

StoresTimeline connected

React 18.3.1 detected. Live state below.

Stores

cart

total: 0

user

name: "Ada" · loggedIn: false

Timeline: click an entry to time-travel (free)

Interactive product illustration. A simulation of the panel wired to the app beside it, not an extension screenshot. Try it: add the keyboard again and watch the items[1].quantity path appear.

free tier included with install
one line per store

Accurate stores, timeline, safe time travel.

Register each store once for accurate inspection, searchable history and safe ID-based time travel. The experimental zero-setup view stays clearly labelled.

one_line_setup: Register a store once, inspect it from then on. withDevtoolsBridge(creator, { name: 'cart' }) gives you an accurate live view per store, plus the zero-setup experimental hooks view for quick looks.
plays_nice: Chains the DevTools hook instead of clobbering it. The real React DevTools keeps working next to it, whichever loads first.
stays_local: State never leaves your machine. Data flows from the inspected page to your own panel and nowhere else: no server, no analytics, no telemetry.

Pro tier €9.99
one-time · no subscription
3 previews free

Rewind the bug.

Record while reproducing a bug. Then inspect path-level diffs, likely call-sites, compare any entries, and export a redacted session for offline review.

DevToolsZustand / Trace Sessionrecorded session / 6 steps

[cart] checkout @ storefront.tsx:52 step 6 / 6

items: 0 items[1].quantity: 0 total: 0 user.loggedIn: false

Interactive product illustration. This session contains a real bug: drag the playhead to step 4 and find the moment the total went wrong. Every step is a one-click jump in the real panel.

import { create } from 'zustand';
import { withDevtoolsBridge } from 'zustand-devtools-bridge';

const useCartStore = create(
  withDevtoolsBridge(
    (set) => ({
      items: [],
      addItem: (item) =>
        set((s) => ({ items: [...s.items, item] }),
            false, 'addItem'),  // named in the log
    }),
    { name: 'cart' }
  )
);

€9.99one-time / no subscription

Unlimited Trace Sessions (3 full previews free)
Deep path-level diffs and best-effort call-sites
Compare any two entries, filters, bookmarks and notes
Redacted session export, validated view-only import

Install the free Stores and Timeline tools from the Chrome Web Store. Pro is a €9.99 one-time Gumroad purchase with up to 5 device activations and a 30-day no-questions refund. Gumroad delivers the licence key; activation sends only that key and this product's public ID after consent. Unlock Pro.

setup 3 steps · public release

Get started

Install the extension from the Chrome Web Store, then add zustand-devtools-bridge 0.2.0 to the app. Wrap each store you want to inspect and give it a stable name.

Open DevTools and click the Zustand tab. Registered stores and the Timeline appear live; the experimental Component Hooks view works with zero setup (not guaranteed to be Zustand state).

Want unlimited Trace Sessions? Every install includes three full preview sessions. Pro unlocks unlimited sessions for €9.99 once.

faq 6 answers

Questions people ask

Can I use it today?

Yes. Install the public release from the Chrome Web Store. Stores and Timeline are free; Pro Trace Sessions are an optional €9.99 one-time purchase.

What do I need for it to work?

Chrome (or a Chromium browser that supports DevTools extensions) and an app using React 16.8+ with Zustand 4 or 5. Accurate store inspection uses the one-line zustand-devtools-bridge wrapper per store; the experimental Component Hooks view is zero-setup but not guaranteed to show Zustand state. Install bridge 0.2.0 from npm. The repository README includes the setup example.

Does it conflict with the React DevTools extension?

No. It chains onto the same renderer hook React DevTools uses instead of replacing it, so both extensions work side by side regardless of which loads first.

What data does it collect?

No analytics and no telemetry. Application state stays on your machine: it flows from the inspected page to your own DevTools panel, and what the extension keeps (recent Trace Sessions, the free-preview counter, a license record) lives in your browser's local extension storage. The bridge keeps a bounded per-tab history in the inspected page's own sessionStorage. The only network requests are ones you trigger yourself: activating a licence sends the key and this product's public ID to Gumroad. Full details in the privacy policy.

How does the license work?

One €9.99 Gumroad purchase generates and delivers a licence key. Paste it into the extension and approve the one-time optional Gumroad permission to activate. One licence supports up to 5 device activations, with no subscription or expiry.

What if it doesn't work for me?

Email within 30 days of purchase for a full refund, no questions asked. Bug reports are welcome on GitHub issues either way. See terms and refunds.