Johnny Cache 🎸

A slick Cache Storage inspector for React apps. Browse, search, and explore your cached data with ease.

Features

• Deep JSON Search - Search through all keys and values in your cached data
• Collapsible JSON Tree - Navigate complex nested objects with syntax highlighting
• Multiple Caches - Browse all your Cache Storage caches in one place
• URL Filtering - Quick filter by URL path pattern
• Copy Support - Copy JSON paths or values with one click
• Resizable Panel - Drag edges to resize the inspector window
• Keyboard Shortcuts - ⌘⇧C / Ctrl+Shift+C to toggle

Installation

npm install johnny-cache-inspector

yarn add johnny-cache-inspector

pnpm add johnny-cache-inspector

Usage

Import and add the <CacheInspector /> component to your app. It's recommended to only include it in development:

import { CacheInspector } from 'johnny-cache-inspector';

function App() {
  return (
    <>
      <YourApp />
      {process.env.NODE_ENV === 'development' && <CacheInspector />}
    </>
  );
}

That's it! A small cache icon will appear in the bottom-right corner. Click it to open the inspector.

API

<CacheInspector />

The main component. Renders a floating panel that inspects Cache Storage.

import { CacheInspector } from 'johnny-cache-inspector';

// No props required - just drop it in
<CacheInspector />

useCacheStorage()

A hook to access Cache Storage data programmatically:

import { useCacheStorage } from 'johnny-cache-inspector';

function MyComponent() {
  const { 
    caches,           // Array of cache data
    loading,          // Boolean loading state
    error,            // Error message if any
    refresh,          // Function to reload caches
    getEntryContent,  // Function to get entry JSON content
  } = useCacheStorage();

  // ...
}

Types

import type { CacheEntry, CacheData } from 'johnny-cache-inspector';

interface CacheEntry {
  url: string;
  path: string;
  contentType: string | null;
  size: number | null;
  timestamp: string | null;
  response?: Response;
}

interface CacheData {
  name: string;
  entries: CacheEntry[];
}

Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | ⌘⇧C / Ctrl+Shift+C | Toggle inspector panel | | Escape | Close inspector panel |

Search Modes

JSON Content Search (default)

Searches through all keys and values in your cached JSON data. Matches are highlighted and entries auto-expand to show results.

URL Filter

Quick filter to show only entries matching a URL pattern.

Requirements

• React 18+ or React 19+
• Browser with Cache Storage API support

Development

# Install dependencies
npm install

# Run demo app
npm run dev

# Build library
npm run build

# Build demo app
npm run build:demo

License

MIT