# JsonViewer

Read-only, syntax-highlighted JSON block. Use for admin payload inspectors, debug panels, webhook viewers — any surface where an operator skims, copies, or downloads a structured payload. Theme tokens are wired through CSS variables so it follows light / dark automatically.

[View examples](https://marsam.rahhal.app/components/json-viewer) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui/json-viewer`

**Category:** `feedback`

## Props

| prop | type | purpose |
| --- | --- | --- |
| value | unknown | data to render — stringified with `JSON.stringify(value, null, indent)` |
| json | string | pre-formatted JSON; pass instead of `value` to skip re-stringification |
| indent | number | indent passed to `JSON.stringify`. default 2 |
| language | "json" | "jsonc" | "yaml" | "markup" | highlighter language hint. default "json" |
| maxHeight | string | Tailwind `max-h-*` utility. default `max-h-[32rem]` |
| className / style | passthrough | merged onto the outer `<pre>` |

## When to use what

- **JsonViewer** — read-only payload inspection. Operator skims, copies, or downloads.
- **Form (with Textarea + monospace)** — when the operator must *edit* JSON. The viewer is intentionally read-only.
- **Table / List** — when the structure is uniform enough to flatten into rows; JSON is the fallback when shape varies.

## Implementation note

Internally backed by `prism-react-renderer`. The dependency is encapsulated — swapping highlighters in the future is a single-file edit in `packages/ui/src/json-viewer.tsx` and consumers stay unchanged.