Plumeria@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>
);
}Once rendered, the inspector is enabled by default in development environments (process.env.NODE_ENV === 'development').
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
Alt + IorCmd + I(on macOS) to 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.
Production Mode
By default, the Inspector does not render in production environments to avoid overhead and keep build assets clean.
However, if you want to make the inspector accessible to users in production (for staging environments, demos, or public showcases), you can enable it by passing the production prop:
<Inspector production={true} />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/Alt + I. - Hover over any text, heading, or container on this page to see the outline and compiles rules.
- Press
Shiftto freeze the selection and explore the details in the tooltip.