data · Normal DOM only

JsonViewer

Collapsible JSON tree — useful for inspecting API responses, webhook payloads, debug surfaces.

Use JsonViewer for raw inspection of structured data: server responses, audit-log payloads, function outputs. Tokens (strings, numbers, keys, punctuation) all colour from --t-code-text-*.

Inside a Twenty front-component, prefer the bridge import

This JsonViewer is Radix-based and uses data-* selectors that the Twenty Remote DOM bridge strips. For panel content, import { JsonVisualizer } from @8maverik8/twenty-design/twenty-ui — re-exports the same primitive from twenty-sdk/ui, which Twenty has verified inside front-component'ов.

Twenty's name for what we call JsonViewer.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { JsonViewer } from '@8maverik8/twenty-design';

Examples

API response shape

"response": {

"ok": true,

"count": 3,

"stats": {… 2}

"items": [… 2]

"meta": null,

"tags": [… 3]

}

tsx
<JsonViewer rootKey="response" value={{ ok: true, items: […] }} />

Guidelines

✓

Pass initialExpandDepth = 1 for typical responses.Fully-expanded blobs hide their shape; everything-collapsed needs N clicks to see anything.

Use JsonViewer as a primary content surface.It's an inspection tool — users should not be reading JSON in normal flows.