Skip to content

API reference > @kontsedal/olas-devtools > DevtoolsPanel

DevtoolsPanel() function ​

Drop-in devtools panel for an Olas root.

Features: - **Omnibox** (/ to focus) — one search over controllers, queries, mutations, form fields and payloads; Enter jumps to the match. - **Timeline** — every event in a ring buffer, grouped by cause, with one lane per plugin that can be shown or hidden. - **Tree / Cache / Inspector / Mutations / Fields** — each a windowed list that mounts only the rows in view. - **Filter** field per tab — text-matches kind, path, name, payload. - **Pause** toggle freezes the log without stopping ingestion.

Styled inline (no CSS import needed) and scoped to the .olas-devtools-* class prefix. Hosts override the palette via --olas-* custom properties. A render error inside the panel shows in the panel, never unmounting the host app. Spec §14.

Signature:

typescript
export declare function DevtoolsPanel(props: DevtoolsPanelProps): ReactElement;

Parameters ​

Parameter

Type

Description

props

DevtoolsPanelProps

Returns:

ReactElement

Released under the MIT License.