SWR Cache DevTools

Developer tools for SWR cache visualization and debugging in React applications.

Features

• 🔍 Cache Visualization: View and explore your SWR cache data in real-time
• 🎨 JSON Editor: Edit cache values directly in the DevTools interface
• 🌗 Theme Support: Light, dark, and auto themes
• 📱 Flexible Positioning: Position the DevTools panel anywhere on your screen
• ⚡ Zero Configuration: Works out of the box with any SWR setup

Installation

npm install swr-cache-devtools
# or
yarn add swr-cache-devtools
# or
pnpm add swr-cache-devtools

Usage

Simply import and add the SwrCacheDevTools component to your React application:

import { SwrCacheDevTools } from "swr-cache-devtools";

function App() {
  return (
    <div>
      {/* Your app content */}
      <SwrCacheDevTools />
    </div>
  );
}

With Custom Configuration

import { SwrCacheDevTools } from "swr-cache-devtools";

function App() {
  return (
    <div>
      {/* Your app content */}
      <SwrCacheDevTools
        position="bottom-right"
        theme="dark"
        defaultOpen={false}
        maxHeight={400}
        maxWidth={600}
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | | ------------- | -------------------------------------------------------------- | ---------------- | ----------------------------------- | | position | "top-left" \| "top-right" \| "bottom-left" \| "bottom-right" | "bottom-right" | Position of the DevTools panel | | theme | "light" \| "dark" \| "auto" | "auto" | Color theme | | defaultOpen | boolean | false | Whether the panel starts open | | maxHeight | number | 400 | Maximum height of the panel | | maxWidth | number | 600 | Maximum width of the panel | | className | string | - | Custom CSS class for the container | | buttonStyle | React.CSSProperties | - | Custom styles for the toggle button | | panelStyle | React.CSSProperties | - | Custom styles for the panel |

Development Mode Only

It's recommended to only include the DevTools in development mode:

import { SwrCacheDevTools } from "swr-cache-devtools";

function App() {
  return (
    <div>
      {/* Your app content */}
      {process.env.NODE_ENV === "development" && <SwrCacheDevTools />}
    </div>
  );
}

Demo

You can try the DevTools in our interactive demo application:

• Live Demo
• Local development: pnpm dev --filter=web

Project Structure

This repository uses Turborepo for monorepo management:

• packages/swr-cache-devtools: Main library package
• apps/web: Demo application showcasing the DevTools
• apps/docs: Documentation website

Requirements

• React >= 17.0.0
• SWR >= 2.0.0

Development

To develop all apps and packages:

# Install dependencies
pnpm install

# Start development mode
pnpm dev

To develop specific packages:

# Develop the DevTools package
pnpm dev --filter=swr-cache-devtools

# Develop the demo app
pnpm dev --filter=web

Build

To build all packages:

pnpm build

To build specific packages:

# Build the DevTools package
pnpm build --filter=swr-cache-devtools

# Build the demo app
pnpm build --filter=web

Publishing

The main package is automatically published to npm when changes are made to the packages/swr-cache-devtools directory.

Contributing

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

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT License - see the LICENSE file for details.

Author

Yoshiharu Kamata

Links

• GitHub Repository
• npm Package
• Live Demo