/// Data Display
JsonViewer
A collapsible JSON tree that auto-masks sensitive keys, with copy and expand/collapse-all.
import { JsonViewer } from "@protocore/pds";Basics
Pass any JSON-serializable value and an optional file-name name. Keys read as ink, strings secondary, numbers pick up the lone accent, punctuation muted. Every container node can copy its own subtree.
Auto-masking secrets
Values under sensitive keys are masked by default — the built-in pattern is /secret|token|key|password|authorization/i. Masked leaves render bullets with a masked tag and are excluded from the visible tree, so config blobs are safe to display.
Collapsed & custom patterns
defaultCollapsed starts nested containers folded (each shows a … N items summary you can expand). Pass maskPatterns (a RegExp or array) to replace the built-in list — here masking is narrowed so nothing in the trace is hidden.
When to use it
JsonViewer is for inspecting whole structured payloads — API responses, webhook bodies, relayer configs, trace objects. The collapse/expand-all bar and per-node copy make deep objects navigable, and default masking means you can render config that contains secrets without leaking them.
For a single identifier rather than an object, use CodeRef. For a curated set of labelled facts (not raw JSON), use DefinitionList. When you only need to hide one secret string, MaskedValue is lighter than dropping it into a viewer.
Usage
Do
- Use it to inspect raw payloads and configs where structure matters.
- Rely on the default mask patterns when rendering anything that may carry secrets.
- Set `defaultCollapsed` for large objects so users drill in deliberately.
- Narrow or widen `maskPatterns` to match your key naming conventions.
Don't
- Don't use it as a formatted key/value display for curated data — that's DefinitionList.
- Don't disable masking on payloads that include credentials.
- Don't paste enormous documents inline without `defaultCollapsed`; it gets unwieldy.
- Don't assume masking sanitizes your data — it only hides matched keys in the view.
Accessibility
| Keys | Action |
|---|---|
| Tab | Moves through the bar buttons and each node's toggle / copy controls. |
| Enter / Space | Toggles a node open/closed, or triggers a copy action. |
- Each container toggle exposes `aria-expanded` and a descriptive `aria-label` (`Expand <key>` / `Collapse <key>`).
- Copy actions announce via a visually-hidden `role="status"` live region when the clipboard write succeeds.
- Structural punctuation and the masked tag are decorative; keys and values carry the meaning read by assistive tech.
JsonViewer props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | |
defaultCollapsed | boolean | false | Start nested containers collapsed. |
maskPatterns | RegExp | RegExp[] | — | One or more patterns tested against each key; matching values are masked. Overrides the built-in `/secret|token|key|password|authorization/i`. |
name | ReactNode | — | Optional file-name label shown at the left of the bar, e.g. `"payload.json"`. |
style | CSSProperties | — | |
value * | unknown | — | The value to render. Any JSON-serializable value (object, array, or primitive). |