Developer Tools
Theme Inspector
@themvora/core — the token system
The Theme Inspector is a floating panel that inspects whatever theme is live — its identity, the current selection, every flattened token, and the resolved CSS variables — and updates in real time as you switch families or modes. It's the fastest way to see what your theme is actually producing.
1Try it on this page
ThemeInspector mounted by this site's toolbar. Click it and the panel shows the active theme's name, family, mode, tokens and CSS variables — then switch families in the header to watch it update in place.2Framework usage
import { ThemeProvider, ThemeInspector } from "@themvora/react";
export function App() {
return (
<ThemeProvider defaultTheme="plum-light">
<YourApp />
<ThemeInspector />
</ThemeProvider>
);
}Under the hood every framework wrapper mounts the same @themvora/web <themvora-inspector> custom element, so the behavior and visuals are identical across React, Vue, Svelte, Solid, Angular, Astro and vanilla HTML. React and Next also ship a native React implementation with the same props.
3Props
| Prop | Type | Default | Description |
|---|---|---|---|
| bottom | number | 104 | Distance from the bottom of the viewport, in px. |
| right | number | 32 | Distance from the right edge of the viewport, in px. |
| size | number | 40 | Toggle button size (width and height), in px. |
| zIndex | number | 9999 | Z-index for the floating toggle and panel. |
4Styling
| ::part(inspector-toggle) | Style the floating toggle (background, border, radius, …). |
| ::part(inspector-panel) | Style the popover panel (surface, radius, shadow, …). |
| --theme-color-* | Every surface uses the active theme's semantic tokens automatically. |
/* Works in any framework — plain CSS. */
themvora-inspector::part(inspector-toggle) {
border-radius: 9999px; /* pill toggle */
background: var(--theme-color-accent);
}
themvora-inspector::part(inspector-panel) {
border-radius: 20px;
border-color: var(--theme-color-ring);
}5Web component API
<!DOCTYPE html>
<html>
<body>
<themvora-provider default-theme="plum-light">
<your-app></your-app>
<themvora-inspector
bottom="104"
right="32"
z-index="50"
></themvora-inspector>
</themvora-provider>
<script type="module">
// Registers every <themvora-*> element, including the inspector.
import "@themvora/web";
</script>
</body>
</html>The custom element reads the nearest <themvora-provider> runtime, subscribes to the store, and re-renders the panel whenever the theme changes. Attributes mirror the props: bottom, right, size, z-index. Pick a z-index below your modal overlays (e.g. a search dialog) so the inspector tucks behind them automatically.