Zustand Expo DevTools

A DevTools plugin that brings Zustand state debugging capabilities to Expo DevTools, allowing you to inspect and debug your Zustand stores directly in the Expo development environment. This plugin works exactly like the built-in Zustand devtools middleware, with the same API and functionality.

Features

• 🔍 State Inspection - View your Zustand store state in real-time
• 🎯 Action Tracking - Monitor state changes and actions with named actions
• 🔄 Time Travel Debugging - Navigate through state history using Redux DevTools
• 🚀 Expo Integration - Seamlessly integrates with Expo DevTools platform
• 📱 React Native Support - Works with Expo managed workflow
• 🌐 Redux DevTools Core - Leverages Redux DevTools app core for state inspection
• 🏗️ TypeScript Support - Full TypeScript support with proper type definitions
• ⚡ Production Safe - Automatically disabled in production builds

Installation

npm install @csark0812/zustand-expo-devtools
# or
yarn add @csark0812/zustand-expo-devtools
# or
pnpm add @csark0812/zustand-expo-devtools

Accessing DevTools

To access the DevTools interface:

1. Start your Expo development server (npx expo start)
2. Open your app in Expo Go or development build
3. Press Shift+M in the Expo development menu to open DevTools
4. Navigate to the DevTools plugin to inspect your Zustand stores

Quick Start

import { create } from 'zustand';
import { devtools } from '@csark0812/zustand-expo-devtools';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const useCounterStore = create<CounterState>()(
  devtools(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 }), false, 'increment'),
      decrement: () => set((state) => ({ count: state.count - 1 }), false, 'decrement'),
    }),
    {
      name: 'counter-store', // Optional: name your store for better debugging
    }
  )
);

How It Works

This plugin provides the same functionality as Zustand's built-in devtools middleware, but integrated with Expo's DevTools platform:

1. Store Integration: Wrap your Zustand store with the devtools middleware (same API as Zustand's built-in devtools)
2. Expo DevTools: Press Shift+M in your Expo development menu to open DevTools
3. DevTools Plugin: Navigate to the DevTools plugin to inspect your stores
4. Debug: Inspect state, track actions, and time-travel through your store's history

Configuration Options

interface DevtoolsOptions {
  name?: string;                 // Store name (default: 'zustand')
  enabled?: boolean;            // Enable/disable devtools (default: true)
  anonymousActionType?: string; // Default action name (default: 'anonymous')
  store?: string;              // Store identifier
  serialize?: boolean | {       // Serialization options for complex objects
    replacer?: (key: string, value: unknown) => unknown;  // Custom serializer
    reviver?: (key: string, value: unknown) => unknown;   // Custom deserializer
    options?: boolean | {       // Additional serialization options
      date?: boolean;
      regex?: boolean;
      undefined?: boolean;
      error?: boolean;
      symbol?: boolean;
      map?: boolean;
      set?: boolean;
      function?: boolean | ((fn: Function) => string);
    };
  };
}

Serialization Options

When your store contains complex objects like Date, Map, Set, or custom classes, you can use the serialize option to properly handle them in DevTools:

const useStore = create<State>()(
  devtools(
    (set) => ({
      todos: [],
      addTodo: (text) => set((state) => ({
        todos: [...state.todos, {
          id: Date.now().toString(),
          text,
          createdAt: new Date(), // Date object
        }]
      }), false, 'addTodo'),
    }),
    {
      name: 'todo-store',
      serialize: {
        // Custom function to handle Date objects during serialization
        replacer: (key, value) => {
          if (value instanceof Date) {
            return { __type: 'Date', value: value.toISOString() };
          }
          return value;
        },
        // Custom function to restore Date objects during deserialization
        reviver: (key, value) => {
          if (value && value.__type === 'Date') {
            return new Date(value.value);
          }
          return value;
        },
      },
    }
  )
);

This is particularly useful when using libraries like:

• superjson for automatic serialization
• Custom serialization for Map, Set, dayjs, etc.
• Immer or other state management patterns with complex objects

Usage with Actions

For better debugging experience, provide action names when updating state:

const useStore = create<State>()(
  devtools(
    (set) => ({
      // ... your state
      updateUser: (user) => set({ user }, false, 'updateUser'),
      resetState: () => set(initialState, false, 'resetState'),
    }),
    { name: 'user-store' }
  )
);

Usage with Other Middleware

The plugin works well with other Zustand middleware like immer and persist:

import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { devtools } from '@csark0812/zustand-expo-devtools';

const useStore = create<State>()(
  devtools(
    persist(
      immer((set) => ({
        // ... your state and actions
      })),
      {
        name: 'app-storage',
        storage: createJSONStorage(() => AsyncStorage),
      }
    ),
    { name: 'app-store' }
  )
);

Production Builds

The devtools middleware is automatically disabled in production builds, so you don't need to worry about removing it for production.

Requirements

• Expo SDK 53+
• Zustand 5.0.5+
• React Native / Expo development environment

Community and adoption

See Community and adoption for public implementation reports, maintenance outcomes, downstream integrations, and dated npm activity.

Built something with the package? Use the project showcase form to share a public implementation without implying endorsement or production use.

Development

This repository contains:

• /src - The main devtools plugin source code
• /webui - The DevTools web UI that connects to Redux DevTools Extension
• /examples/basic - Example Expo app demonstrating usage

To run the example:

cd examples/basic
npm install
npx expo start

To develop the plugin:

# Install dependencies
npm install

# For development (rebuilds on changes)
npm run build:dev

# Build the plugin
npm run build

# Build the web UI
npm run web:export

# Build everything
npm run build:all

Development Workflow: After making changes to the plugin source code, run npm run build:dev in the root folder to rebuild the library. This will update the compiled code that the example app uses for testing your changes.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Automated Releases

This repository uses automated versioning and publishing when PRs are merged to main. The version bump type is determined by PR labels:

• major label → Major version bump (e.g., 2.0.0 → 3.0.0) - Breaking changes
• minor label → Minor version bump (e.g., 2.0.0 → 2.1.0) - New features
• patch label → Patch version bump (e.g., 2.0.0 → 2.0.1) - Bug fixes (default)

To control the release type:

1. Add the appropriate label (major, minor, or patch) to your PR
2. If no label is added, it defaults to a patch release
3. When the PR is merged, the version will be automatically bumped and published to npm

License

MIT © Christopher Sarkissian

Related

• Zustand - 🐻 Bear necessities for state management in React
• Zustand Getters - Reactive JavaScript getters for Zustand
• Expo DevTools - Expo's debugging and profiling tools
• Redux DevTools - DevTools core integration

Inspiration & Credits

This project was inspired by:

• redux-devtools-expo-dev-plugin - Redux DevTools integration for Expo
• zustand-expo-devtools - Previous Zustand DevTools implementation

Built using:

• Expo DevTools Plugins - Expo's DevTools plugin architecture