Skip to content

DevTools

@theme-kit/devtools

InspectorDebugging4 exports

Runtime inspector, plugin and panel for debugging theme changes.

Install the integration alongside @theme-kit/core.

bash
pnpm add @theme-kit/devtools

Quick Start

Complete copy-paste usage for this package.

plugin.ts
ts
1import { createThemeRuntime } from "@theme-kit/core";
2import { createDevToolsPlugin } from "@theme-kit/devtools";
3
4const runtime = createThemeRuntime({
5  themes,
6  plugins: [createDevToolsPlugin()],
7});

API Reference

Curated highlights below. The complete generated reference — every signature, parameter and type — is at /api-reference/devtools.

API

ExportDescription
createDevToolsPlugin(options)Theme-kit plugin exposing an inspector.
createDevToolsInspector(options)Records theme-change entries, lifecycle performance events and state snapshots.
createDevToolsPanel()UI panel.
window.__THEME_KIT_DEVTOOLS__Exposed inspectors for extension debugging.
@theme-kit/devtools — Theme Kit