@plumeria/inspector

@plumeria/inspector is a component you render once. It outlines the element under the cursor and shows the Plumeria rules applied to it, in the browser.

Installation

To start using the inspector, install the @plumeria/inspector package in your project.

npm i @plumeria/inspector

yarn add @plumeria/inspector

pnpm i @plumeria/inspector

Basic 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 Shift key to freeze/lock targeting onto the currently hovered element. This allows you to move your cursor into the inspector tooltip and scroll through rules. Press Shift again to unlock.
• Keyboard Shortcut: Press Cmd + I / Ctrl + I 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.

Props

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:

1. Click the Inspector: ON badge in the bottom-right corner, or press Cmd + I / Ctrl + I.
2. Hover over any text, heading, or container on this page to see the outline and compiled rules.
3. Press Shift to freeze the selection and explore the details in the tooltip.