The HUD & Light Box

With xrayVitePlugin({ hud: true }), a small dev overlay appears in the corner. It shows every detected width band per Plate — captured ones lit, the rest dim — sourced from the committed Plate files on disk.

• Capture toggles browse-time re-capture on and off.
• Light Box flips every mounted <Skeleton> on the page to its skeleton so you can inspect the bones without waiting on a loading state. You can also open any page with ?xray-lightbox.

Enable it

import { xrayVitePlugin } from '@hueest/xray'

export default defineConfig({
  plugins: [xrayVitePlugin({ hud: true })],
})

The HUD is dev-only. Production builds use the hook-free React adapter and do not ship the HUD, capture client, Light Box store, or plate hot-swap machinery.

Capture

The Capture checkbox controls whether browsing writes Plates. It is sticky per tab, and the URL parameter ?xray-capture starts it on for that tab.

When Capture is on, a <Skeleton> waits until its children render real content, lets the subtree settle, serializes the rendered DOM into a Plate, and writes the result to plates/<name>.json through the Vite dev server.

Light Box

Light Box is the fastest visual check. It forces every mounted <Skeleton> to show its Skeleton regardless of the component’s loading state. Use it when you want to compare the captured bones against a fully loaded page.

You can drive it three ways:

• tick Light Box in the HUD;
• open the page with ?xray-lightbox;
• run __XRAY__.lightbox.set(true) in the console.

The setting is stored in sessionStorage, so it follows reloads in the same tab without affecting other tabs.