Nullslate Dev Tools

Reusable React dev toolbar with pluggable panels and a network inspector.

Install

npm install @nullslate/dev-tools

Usage

import{useEffect}from'react';import{DevToolbarProvider,DevToolbarPill,NetworkTool,installMonitoredFetch,}from'@nullslate/dev-tools';exportfunctionApp(){useEffect(()=>installMonitoredFetch(),[]);return(<DevToolbarProvider><NetworkTool/><YourApp/><DevToolbarPill/></DevToolbarProvider>);}

Use installMonitoredFetch() to patch window.fetch while your app is mounted, createMonitoredFetch(fetch) for explicit wrappers, or call recordRequest() manually from an existing HTTP client.

Included Tools

• Draggable, resizable floating panels with saved positions.
• Network inspector with filtering, search, response/request payload previews, cURL copy/export, and HAR export.
• Feature flag, performance, error, toggle, and tree adapter tools.
• AMOLED black theme by default, with a built-in settings panel for live color changes saved to localStorage.

Example

cd examples/basic
npm install
npm run dev

GitHub Pages

The Vite example can be deployed as the repository's GitHub Pages app. The workflow in .github/workflows/deploy-pages.yml builds examples/basic and publishes examples/basic/dist.

In GitHub, set Settings → Pages → Build and deployment → Source to GitHub Actions. Push to main or run the workflow manually.