sheengemologic ui
All components

JSONViewer

Validates and deterministically formats JSON into a searchable, copyable, virtualized line view.@gemologic/sheen-code · content

Playground

This example has no scalar controls. Its validated source remains interactive below.
API response
9 of 9 lines
{
"records": [
{
"amount": 42,
"id": "one"
}
],
"status": "ready"
}
<JSONViewer value={response} label="API response" />

Variant matrix

API response
API response
9 of 9 lines
{
"records": [
{
"amount": 42,
"id": "one"
}
],
"status": "ready"
}

Anatomy

Package
@gemologic/sheen-code
Source
packages/code/src/JSONViewer.tsx
Tokens
  • --sheen-color-bg-raised
  • --sheen-color-warning-subtle
  • --sheen-font-mono

Accessibility

Role: named region containing a focusable virtual list and listitemsKeyboard: Tab, Shift+Tab, Enter, Space, PageUp, PageDown, Home, End

Do

  • Pass parsed application data and let JSONViewer validate it.
  • Keep sortKeys enabled for copyable diagnostics.

Do not

  • Do not pass secrets or authorization material.
  • Do not pass class instances and assume private properties are hidden.

Generated props

NameTypeDefaultDescription
value *unknown—JSON-compatible value; functions, symbols, bigint, nonfinite numbers, cycles, and excessive depth are rejected.
label *string—Required accessible viewer and line-list name.
indent2 | 42Pretty-print indentation.
sortKeysbooleantrueSorts object keys for deterministic output.
maxDepthnumber32Maximum accepted nesting depth from 1 to 64.
searchablebooleantrueShows a debounced search over formatted lines.
copyablebooleantrueCopies the complete validated JSON string.
initialHeightnumber360Deterministic SSR and initial viewport height in pixels from 120 to 1200.
lineHeightnumber22Fixed virtual row height in pixels from 16 to 48.
onCopyError(error: unknown) => void—Receives Clipboard API failures without exposing raw errors in the UI.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.