@nbt-dev/devtools
v0.1.1
Published
Drop-in React devtools panel (console logs, live data browser, entity graph, source editor) for apps backed by an NBT console.
Downloads
1,532
Readme
@nbt-dev/devtools
A drop-in React devtools panel for any frontend backed by an NBT console. It gives you, against the live daemon:
- Console — streaming server logs (
/_console/logs/ws) - Data — a live, virtualized browser over every installed cartridge's
entities, streamed off the bulk WebSocket (
/_ws/bulk) with search + row detail - Diagram — an entity-relationship graph with live row counts
- Sources — a dev-mode NBT source editor with diagnostics and apply support
- Settings — General (devtools panel font), Editor (theme, font size, line wrapping, tab size) and Integrations (mirror a cartridge into a Google Sheet). Preferences persist per operator on the console (server-side), with a localStorage fallback for unauthenticated/dev use.
It assumes your app uses NBT auth: the data socket reads the current session
bearer from POST /api/auth/session/current (sent with credentials:
"include"), same as the console inspector.
Install
npm install @nbt-dev/devtoolsreact and react-dom (>=18) are peer dependencies.
Usage
Mount the panel once near your app root — that's it, no stylesheet import:
import { NimbitDevTools } from "@nbt-dev/devtools";
export default function App() {
return (
<>
<YourApp />
{/* Empty string => same-origin. Point at the console otherwise. */}
<NimbitDevTools apiBaseUrl="https://console.example.com" />
</>
);
}The panel renders nothing until toggled. It owns the built-in shortcuts Ctrl+F12 and Ctrl/Cmd+Shift+D. You can also toggle it from anywhere:
import { toggleDevTools } from "@nbt-dev/devtools";
toggleDevTools();
// or, with no import: window.dispatchEvent(new CustomEvent("devtools-toggle"))Next.js
NimbitDevTools is a client component (the bundle carries a "use client"
banner). Render it inside a client boundary / your root layout's client tree.
Styling
The panel mounts inside its own shadow root attached to <body>, with its
stylesheet injected into that shadow root. Nothing leaks in or out: the host
app's CSS (and theme/<html> font-size) can't reach the panel, and the panel's
styles can't touch the host. Sizing is pinned to absolute pixels, so the panel
renders identically no matter how the host themes its document.
The standalone @nbt-dev/devtools/styles.css export is still published for
advanced/manual mounting, but is not needed for normal usage.
API
| Export | Description |
| --- | --- |
| NimbitDevTools | The panel. Props: apiBaseUrl?, defaultActiveTab?. |
| toggleDevTools() | Dispatches the devtools-toggle window event. |
| useDevToolsOpen() | Reactive open/closed state for your own toolbar button — works outside the panel, no provider needed. |
| DevToolsProvider, useDevTools | Lower-level state if you compose DevTools yourself. |
| DevToolsConfigProvider, useDevToolsConfig | The apiBaseUrl config context. |
| DevTools | The bare panel (expects the providers above). |