# @mwillbanks/tuil-devtools

Source: /tuil/docs/reference/packages/devtools
Locale: en

Runtime inspector and developer overlay for tuil applications.



## Overview [#overview]

Runtime inspector and developer overlay for tuil applications.

`@mwillbanks/tuil-devtools` is independently installable and also participates in the
umbrella `@mwillbanks/tuil` runtime where applicable.

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @mwillbanks/tuil-devtools
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @mwillbanks/tuil-devtools
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @mwillbanks/tuil-devtools
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @mwillbanks/tuil-devtools
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## How it operates [#how-it-operates]

Devtools subscribes to runtime snapshots without changing application state. The overlay exposes lifecycle, focus, services, commands, plugins, events, capabilities, and theme information.

<Mermaid
  chart="flowchart LR
  S0[&#x22;mount inspector&#x22;]
  S1[&#x22;subscribe&#x22;]
  S2[&#x22;render snapshots&#x22;]
  S3[&#x22;unsubscribe&#x22;]
  S0 --> S1
  S1 --> S2
  S2 --> S3"
/>

## API [#api]

| API                                                                                                       | Signature                                 | Description                                     |
| --------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ----------------------------------------------- |
| [`DevtoolsActionContext`](/tuil/docs/reference/packages/devtools/api/devtools-action-context)                  | `interface DevtoolsActionContext`         | Public interface DevtoolsActionContext.         |
| [`DevtoolsActionContribution`](/tuil/docs/reference/packages/devtools/api/devtools-action-contribution)        | `interface DevtoolsActionContribution`    | Public interface DevtoolsActionContribution.    |
| [`DevtoolsActionHistorySnapshot`](/tuil/docs/reference/packages/devtools/api/devtools-action-history-snapshot) | `interface DevtoolsActionHistorySnapshot` | Public interface DevtoolsActionHistorySnapshot. |
| [`DevtoolsActionRecord`](/tuil/docs/reference/packages/devtools/api/devtools-action-record)                    | `interface DevtoolsActionRecord`          | Public interface DevtoolsActionRecord.          |
| [`DevtoolsCapability`](/tuil/docs/reference/packages/devtools/api/devtools-capability)                         | `type DevtoolsCapability`                 | Public type DevtoolsCapability.                 |
| [`DevtoolsContribution`](/tuil/docs/reference/packages/devtools/api/devtools-contribution)                     | `interface DevtoolsContribution`          | Public interface DevtoolsContribution.          |
| [`DevtoolsExtension`](/tuil/docs/reference/packages/devtools/api/devtools-extension)                           | `type DevtoolsExtension`                  | Public type DevtoolsExtension.                  |
| [`DevtoolsExtensionRegistry`](/tuil/docs/reference/packages/devtools/api/devtools-extension-registry)          | `class DevtoolsExtensionRegistry`         | Public class DevtoolsExtensionRegistry.         |
| [`DevtoolsObserverContribution`](/tuil/docs/reference/packages/devtools/api/devtools-observer-contribution)    | `interface DevtoolsObserverContribution`  | Public interface DevtoolsObserverContribution.  |
| [`DevtoolsObserverKind`](/tuil/docs/reference/packages/devtools/api/devtools-observer-kind)                    | `type DevtoolsObserverKind`               | Public type DevtoolsObserverKind.               |
| [`DevtoolsPanel`](/tuil/docs/reference/packages/devtools/api/devtools-panel)                                   | `type DevtoolsPanel`                      | Public type DevtoolsPanel.                      |
| [`DevtoolsPanelContribution`](/tuil/docs/reference/packages/devtools/api/devtools-panel-contribution)          | `interface DevtoolsPanelContribution`     | Public interface DevtoolsPanelContribution.     |
| [`devtoolsPanels`](/tuil/docs/reference/packages/devtools/api/devtools-panels)                                 | `constant devtoolsPanels`                 | Public constant devtoolsPanels.                 |
| [`DevtoolsPermission`](/tuil/docs/reference/packages/devtools/api/devtools-permission)                         | `type DevtoolsPermission`                 | Public type DevtoolsPermission.                 |
| [`DevtoolsQueryContribution`](/tuil/docs/reference/packages/devtools/api/devtools-query-contribution)          | `interface DevtoolsQueryContribution`     | Public interface DevtoolsQueryContribution.     |
| [`DevtoolsStore`](/tuil/docs/reference/packages/devtools/api/devtools-store)                                   | `class DevtoolsStore`                     | Public class DevtoolsStore.                     |
| [`inspectRuntime`](/tuil/docs/reference/packages/devtools/api/inspect-runtime)                                 | `function inspectRuntime`                 | Public function inspectRuntime.                 |
| [`RuntimeInspection`](/tuil/docs/reference/packages/devtools/api/runtime-inspection)                           | `interface RuntimeInspection`             | Public interface RuntimeInspection.             |
| [`TuilDevtools`](/tuil/docs/reference/packages/devtools/api/tuil-devtools)                                     | `constant TuilDevtools`                   | Public constant TuilDevtools.                   |
| [`TuilDevtoolsProps`](/tuil/docs/reference/packages/devtools/api/tuil-devtools-props)                          | `interface TuilDevtoolsProps`             | Public interface TuilDevtoolsProps.             |

## Events and lifecycle [#events-and-lifecycle]

Reads the runtime event history and observer stream. It does not emit application events.

All subscriptions and registrations return a disposer or belong to an owning
runtime that disposes them in reverse order.

## Example [#example]

```tsx
import { TuilDevtools } from "@mwillbanks/tuil-devtools";

render(<TuilDevtools />);
```

## Related [#related]

* [Package architecture](/tuil/docs/concepts/packages)
* [Events](/tuil/docs/concepts/events)
* [Testing](/tuil/docs/guides/testing)