---
title: "JSON Inspector"
description: "The portal's read-only payload inspector: Monaco-rendered JSON with timestamp annotations, per-line hover actions, copy, and raw view."
component: true
---

```tsx
"use client"

import { JsonInspector } from "@/components/json-inspector/json-inspector"

const payload = {
  id: "evt_8f2k1",
  type: "invoice.paid",
  createdAt: "2026-07-27T07:03:41.000Z",
  data: {
    id: "inv_2041",
    amountCents: 12900,
    currency: "EUR",
    lines: ["seat", "overage"],
    customer: { id: "cus_112", email: "ada@acme.dev" },
  },
}

export function JsonInspectorDemo() {
  return (
    <div className="w-full overflow-hidden rounded-md border border-border">
      <JsonInspector value={payload} label="Payload" fill={false} onIncludeSelection={() => {}} onExcludeSelection={() => {}} />
    </div>
  )
}

```

Objects render as pretty-printed JSON in a read-only Monaco editor with the
portal's GitHub themes (following your light/dark mode). ISO timestamps get an
inline human-readable annotation. Hovering a line surfaces per-value actions:
copy, and optional include/exclude callbacks your query bar can consume.
Strings render in the language resolved from the `Content-Type` header
(XML, HTML, YAML, plain text).

`RequestResponseInspectors` stacks two of these (request and response, each
with a headers/body toggle) and is the lower half of the
[Delivery Detail Drawer](/docs/components/delivery-detail).

## Installation

<ItemInstall name="json-inspector" target="components/json-inspector/json-inspector.tsx" />

## Usage

<ComponentSource name="json-inspector-demo" title="components/json-inspector-demo.tsx" />

## Props

| Prop | Type | Description |
| ---- | ---- | ----------- |
| `value` | `unknown` | Object/array → JSON document; string → rendered per content type. |
| `headers` | `Record<string, unknown> \| null` | Resolves the language for string bodies via Content-Type. |
| `label` | `string` | Section header label; defaults to the language name. |
| `fill` | `boolean` | Fill the parent (drawer halves) vs. size to content. Default `true`. |
| `collapsed` / `onToggleCollapsed` | — | Section collapse state. |
| `onIncludeSelection` / `onExcludeSelection` | `(selection) => void` | Hover actions per line; selection carries `{ mode, path, value }`. |
| `isSelectionQueryable` | `(selection) => boolean` | Hide query actions for lines that can't be queried. |
| `extraActions` | `ReactNode` | Extra buttons in the section header. |