@plumeria/inspector
A debugging utility component for inspecting Plumeria styled components and their CSS rules in real-time.
@plumeria/inspector is an interactive DevTools utility component that allows you to inspect elements, highlight components, and view their compiled Plumeria styles directly in the browser.
Installation
To start using the inspector, install the @plumeria/inspector package in your project.
npm i @plumeria/inspectoryarn add @plumeria/inspectorpnpm i @plumeria/inspectorBasic Usage
Import Inspector and render it at the root of your application (e.g., in a root layout or main entry point component).
import { Inspector } from '@plumeria/inspector';
import type { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
return (
<html>
<body>
{/* Render the inspector component */}
<Inspector />
{children}
</body>
</html>
);
}Features
- Interactive Hover Overlay: Hovering over elements displays a visual border highlight showing their target area.
- CSS Property Tooltip: Shows the active CSS rules, classes, and properties injected by Plumeria for the hovered element.
- Target Freezing: Press the
Shiftkey to freeze/lock targeting onto the currently hovered element. This allows you to move your cursor into the inspector tooltip and scroll through rules. PressShiftagain to unlock. - Keyboard Shortcut: Press
Cmd + I/Ctrl + Ito toggle the inspector on and off. - Floating Badge Toggle: A minimalist, semi-transparent badge in the bottom-right corner shows the inspector status and can be clicked to toggle it.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
initial | boolean | false | If true, the inspector starts toggled ON. If false, it starts toggled OFF. |
Production Mode
By default, the Inspector imported from @plumeria/inspector is stripped from production builds entirely. The main entry point resolves through the production export condition to a no-op module, so your bundler emits no client chunk for it — costing 0KB in production.
If you want the inspector accessible in production (for staging environments, demos, or public showcases), import from the @plumeria/inspector/production subpath instead:
import { Inspector } from '@plumeria/inspector/production';
export default function Layout({ children }: { children: ReactNode }) {
return (
<html>
<body>
<Inspector />
{children}
</body>
</html>
);
}Live Demo
The inspector is active right here on this documentation site!
To try it out:
- Click the Inspector: ON badge in the bottom-right corner, or press
Cmd + I/Ctrl + I. - Hover over any text, heading, or container on this page to see the outline and compiled rules.
- Press
Shiftto freeze the selection and explore the details in the tooltip.