SWR Cache DevTools

[yoshi6jp]

🛠️ SWR Cache DevTools - Real-time Cache Visualization & Debugging

Hey SWR community! 👋

I've built a developer tool for visualizing and debugging SWR cache in real-time. Thought you might find it useful!

What is it?

SWR Cache DevTools is a lightweight React component that adds a floating DevTools panel to your app, showing your entire SWR cache state with editing capabilities.

Key Features

• 🔍 Real-time cache monitoring - See all cache keys, values, and states (✅/❌)
• 🎨 Interactive editing - Edit cache values with JSON editor and preview changes
• ⚡ Cache operations - Refresh, delete, or bulk update cache entries
• 🌗 Zero config - Works out of the box with any SWR setup

Technical Implementation

The tool leverages SWR's public APIs to provide cache introspection:

import { useSWRConfig } from 'swr';

// Access the internal cache Map
const { cache, mutate } = useSWRConfig();

Quick Start

npm install swr-cache-devtools

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

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

Try it Live

🎮 Demo: https://swr-cache-devtools-web.vercel.app/

The demo shows various SWR patterns including CRUD operations, error handling, real-time updates, and more.

Links

• GitHub: https://github.com/yoshi6jp/swr-cache-devtools
• npm: https://www.npmjs.com/package/swr-cache-devtools
• Live Demo: https://swr-cache-devtools-web.vercel.app/

Would love to hear your feedback and use cases! 🚀

Requirements: React 17+ and SWR 2+