Skip to content

README.md

Latest commit

 

History

History
126 lines (91 loc) · 2.62 KB

README.md

File metadata and controls

126 lines (91 loc) · 2.62 KB

@blac/devtools-ui

Embeddable DevTools UI for BlaC. Provides in-app state inspection as a draggable overlay or Picture-in-Picture window.

Documentation · npm

Installation

pnpm add @blac/devtools-ui @blac/devtools-connect @blac/react @blac/core

Setup

1. Register the plugin:

import { getPluginManager } from '@blac/core';
import { createDevToolsBrowserPlugin } from '@blac/devtools-connect';

getPluginManager().install(
  createDevToolsBrowserPlugin({ enabled: import.meta.env.DEV }),
);

2. Add the UI:

import { BlacDevtoolsUi } from '@blac/devtools-ui';

function App() {
  return (
    <>
      {import.meta.env.DEV && <BlacDevtoolsUi />}
      <YourApp />
    </>
  );
}

3. Toggle with Alt+D

Components

BlacDevtoolsUi

Auto-initializing wrapper. Uses Picture-in-Picture when available (Chrome 116+), falls back to draggable overlay.

<BlacDevtoolsUi />                  // auto-detect
<BlacDevtoolsUi mode="overlay" />   // force overlay
<BlacDevtoolsUi mode="pip" />       // force PiP

DraggableOverlay

Floating, resizable DevTools window.

import { DraggableOverlay } from '@blac/devtools-ui';
<DraggableOverlay
  onMount={(instancesBloc) => {
    /* ... */
  }}
/>;

PictureInPictureDevTools

Opens DevTools in a separate PiP window (Chrome 116+).

import { PictureInPictureDevTools, isPiPSupported } from '@blac/devtools-ui';
if (isPiPSupported()) {
  <PictureInPictureDevTools />;
}

DevToolsPanel

Core panel for custom integrations (browser extensions, etc.).

import { DevToolsPanel } from '@blac/devtools-ui';
<DevToolsPanel
  onMount={(instancesBloc) => {
    /* ... */
  }}
/>;

Features

  • Instance list with search & filter
  • JSON state viewer
  • State diff between updates
  • Event log (state changes, creation, disposal)
  • Inline state editing
  • Computed getter values in inspector

Keyboard Shortcuts

Shortcut Action
Alt+D Toggle DevTools
Esc Close DevTools

Programmatic Control

window.dispatchEvent(new CustomEvent('blac-devtools-toggle'));

Browser Support

Browser Overlay Picture-in-Picture
Chrome 116+ Yes Yes
Chrome < 116 Yes No
Firefox Yes No
Safari Yes No
Edge (Chromium) Yes Yes

License

MIT