@bril/devpanel

Core React component for live-editing TSX elements.

Installation

npm install -D @bril/devpanel

Usage

import { DesignPanel } from "@bril/devpanel";

function App() {
  return (
    <>
      <YourApp />
      {process.env.NODE_ENV === "development" && <DesignPanel quickPills />}
    </>
  );
}

Props

• endpoint?: string - API endpoint (default: /api/__bril/apply-change)
• initiallyOpen?: boolean - Open panel on mount (default: false)
• quickPills?: boolean - Show Tailwind quick class buttons (default: false)

Keyboard Shortcut

Press Alt+D to toggle the panel.

Documentation

See the main documentation for complete setup instructions.