Hey r/reactjs!

I got tired of constantly opening browser DevTools, filtering out noisy browser extensions, and switching between tabs just to check local storage or quick fetch responses during local development.

To solve this, I built React Dev Companion — a lightweight, zero-dependency developer tools overlay that embeds directly into your React / Next.js application UI.

💡 Key Features:

• Real-Time Network Interception: Intercepts native window.fetch non-invasively to capture HTTP methods, endpoints, and status codes.
• Storage Inspector: Switch between localStorage, sessionStorage, and cookies to view, inject, or delete keys in real-time.
• Zero Extra Dependencies: Designed to keep bundle overhead minimal.
• Dev-Only Friendly: Easy to mount conditionally (e.g., inside Next.js Root Layout or Vite main component).

🔍 Quick Example (Next.js App Router):

```tsx 'use client'; import { DevCompanion } from 'react-dev-companion';

export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body> {children} {process.env.NODE_ENV === 'development' && <DevCompanion />} </body> </html> ); } ```

We set up a strict CI/CD pipeline using GitHub Actions, TypeScript, Conventional Commits, and Husky to keep the codebase clean.

🐙 GitHub Repository: https://github.com/Kickz1nn/react-dev-companion
📖 Dev.to Article: https://dev.to/kickz1nn/building-an-embeddable-zero-dependency-devtools-panel-for-react-nextjs-3ic6

I'd love to hear your thoughts, feedback, or any features you'd like to see added next!