JSON Viewer

Demo & usage

More examples

<sv-json-viewer [value]="payload()" rootLabel="payload" [expandDepth]="2" size="sm" />

<sv-json-viewer [value]="rows()" [maxChildren]="50" />
<!-- The cap is counted and shown as "… N more" rather than silently dropping rows. -->

import { secretKeyRedactor } from '@styloviz/display';
// redact = secretKeyRedactor — matches password, token, api-key, authorization, cvv…

<sv-json-viewer [value]="request()" [redact]="redact" redactedLabel="[redacted]" />
<!-- The mask is the row's VALUE too, so copy and nodeClick cannot leak it. -->

readonly redact: JsonRedactor = ({ path, key }) =>
  path.startsWith('$.headers') || key === 'pan';
// path and kind are there so a whole subtree can be masked by position,
// rather than by naming every leaf inside it.

<sv-json-viewer [value]="session()" [evaluateGetters]="true" />
<!-- Off by default: opening a panel to look at an object is not consent to run
     its getters. On, each is read in its own try/catch. -->

<sv-json-viewer [value]="config()" [expandDepth]="3" [maxRows]="500" />
<!-- 40 containers of 40 children is 1,640 rows, all inside maxChildren: 100. -->

@ViewChild(SvJsonViewerComponent) viewer!: SvJsonViewerComponent;
// viewer.expandAll() / viewer.collapseAll() — or press * on the focused row.

When to use

• Showing a raw API response, webhook payload, event body, config blob or reducer state.
• Any admin or support screen where the question is "what did we actually receive?".
• Anywhere the panel could end up in a screenshot, a screen recording or a support ticket — pass `redact` and the secrets never reach the DOM or the clipboard.
• Inspecting live objects rather than parsed JSON: class instances, things with accessors, values you have no reason to trust enough to execute.
• For source code with syntax highlighting, use Code Block. For a hierarchy of app entities, use Tree View.

Async states

None — this component has nothing to load, so it has no loading, empty or error state to drive.

Outputs

Customization & theming

• `svDiffValues()` from `@styloviz/core` compares two JSON values leaf by leaf and returns `{ path, kind, before, after }` — the shared diff engine, so a JSON diff is not a private half-implementation of one. Its `ignore` predicate takes the PATH rather than the key, so `meta.updatedAt` can be excluded while a top-level `updatedAt` is not.
• Control the initial shape with `expandDepth`, the per-container width with `maxChildren` and the total size with `maxRows`; `expandAll()` / `collapseAll()` are public, and `*` on a focused row expands everything.
• `size` (sm / md), `sortKeys` for alphabetical object keys, `quoteStrings` to render strings as JSON would, and `showCopy` for the per-row copy actions.
• `redact` takes any `(context) => boolean` over `{ path, key, kind, value }`, and `redactedLabel` sets what the masked row shows. There is no default redactor — a component cannot know which of your fields is a secret, and one that guessed would hide data the reader came to read.
• `evaluateGetters` switches accessors from listed-unread to read-in-a-try/catch; a getter that throws shows its message rather than taking the panel down. Only own accessors are listed — a `get` in a class body lives on the prototype, and the prototype is named rather than walked.
• `nodeClick` reports `{ path, key, value }`; `copied` reports `{ path, what, text, redacted }`. On a masked row both carry the mask, not the secret.

Best practices

• Do: Leave `expandDepth` low (1–2) for large payloads — a fully expanded response is a DOM node per value.
• Do: Give `rootLabel` the name of the thing (`response`, `payload`), since it is what the copied paths start from.
• Do: Pass `redact` on any viewer pointed at a request, a session or a config. `secretKeyRedactor` is one import and covers the usual key names.
• Do: Lower `maxRows` on a panel inside a modal or a drawer. It is the only limit that survives nesting.
• Tip: Copy path yields a real accessor (`$.items[3]["content-type"]`) that pastes straight into a test or a console.
• Tip: `copied` carries `redacted`, so an audit log can record that a masked field was copied without recording what was in it.
• Don't: Don't pre-stringify the value — passing the object is the whole point; a string renders as a string.
• Don't: Don't rely on `maxChildren` alone to keep the tree small. It is a width limit and cannot see depth.
• Don't: Don't turn on `evaluateGetters` for an object you did not construct. A getter can hit the network, mutate state or throw.
• Don't: Don't deep-clone or filter the value yourself to hide a secret — `redact` keeps the object intact and the mask out of the clipboard, which a clone cannot do for the paths you forget.

Accessibility

• A real `role="tree"` of `role="treeitem"` rows with `aria-level` and `aria-expanded` — flattened rather than nested, so depth is announced without a DOM nest that cannot be traversed.
• One tab stop for the whole tree; Up/Down move, Right opens then descends, Left closes then climbs to the parent, Home/End jump to the ends and `*` expands everything.
• Type is carried by more than colour — every value renders its own text (`null`, `undefined`, `NaN`, `Map(2)`, `[Circular]`), so nothing depends on being able to tell green from blue.
• A masked row says `[redacted]` in words. There is no icon-only or tint-only version: "this field was hidden from you" is not conveyable in colour, and the label is what a screen reader and a translator both need.
• An unread accessor reads as `(getter — not read)` and one that threw reads as its message, so neither looks like a value that happens to be missing.
• Skipped own properties are counted out loud under their container ("+ 1 non-enumerable, 1 symbol-keyed own properties not shown") rather than leaving a container whose count is a claim the tree cannot support.
• The truncation, ceiling and omission notices are `<p>` elements rather than tree items, so they do not appear in the node count assistive technology reads out.
• A masked row is not expandable, so the keyboard cannot open a subtree that has nothing behind it.