JSON Inspector

PreviousNext

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

{}Payload
Loading...
"use client"

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

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.

Installation

pnpm dlx shadcn@latest add @repost/json-inspector

Installs this item, every component it depends on, and the npm packages listed below.

Usage

components/json-inspector-demo.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: "[email protected]" },
  },
}

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>
  )
}

Props

PropTypeDescription
valueunknownObject/array → JSON document; string → rendered per content type.
headersRecord<string, unknown> | nullResolves the language for string bodies via Content-Type.
labelstringSection header label; defaults to the language name.
fillbooleanFill the parent (drawer halves) vs. size to content. Default true.
collapsed / onToggleCollapsed—Section collapse state.
onIncludeSelection / onExcludeSelection(selection) => voidHover actions per line; selection carries { mode, path, value }.
isSelectionQueryable(selection) => booleanHide query actions for lines that can't be queried.
extraActionsReactNodeExtra buttons in the section header.