Skip to content
Triggery
GitHubXDiscord

@triggery/devtools-panel

React components for inspecting a Triggery runtime in-app. Zero CSS pipeline — components use inline styles so they drop into any host without conflicting with global styles.

npm bundle

Install

Section titled “Install”
pnpm add -D @triggery/core @triggery/react @triggery/devtools-panel

Peer deps: react ^18 || ^19.

What’s inside

Section titled “What’s inside”
ExportPurpose
<InspectorView limit?={20} title?={'Triggery Inspector'} />Live, subscribed panel showing recent runs. Click a row to expand the full JSON snapshot.
<TriggerSnapshotView snapshot variant?='compact'|'full' />Render a single run row (compact) or expanded JSON (full).

Quick example

Section titled “Quick example”
import { InspectorView } from '@triggery/devtools-panel';

function DebugDrawer() {
  return import.meta.env.DEV ? <InspectorView limit={50} /> : null;
}

That’s the full integration. The component subscribes to the active runtime (via <TriggerRuntimeProvider> context, or the global default) and shows a live list of recent runs. Clicking a row expands the full JSON snapshot.

For a one-off render of a single snapshot (e.g. inside a custom debug tool):

import { TriggerSnapshotView } from '@triggery/devtools-panel';

<TriggerSnapshotView snapshot={mySnapshot} variant="full" />

Roadmap

Section titled “Roadmap”

The standalone (in-browser, postMessage-driven) panel and the Chrome DevTools wrapper land in v1.1. Track progress at the Chrome extension stub.

Section titled “Related packages”
@triggery/core The runtime this panel inspects.
@triggery/react These are React components.
@triggery/devtools-redux Stream runtime events into the Redux DevTools extension.
@triggery/devtools-bridge Page-side bridge for external inspectors.

Source

Section titled “Source”