JSON View

The json-view registry item provides JsonView: a Tree inspector for objects and arrays (collapse, types, node copy). The tree engine is @uiw/react-json-view (pinned 2.0.0-alpha.43). f-ui wraps display only — we do not ship @uiw/react-json-view/editor. chrome (off by default, same as Code Block) adds a Tree | Source bar and an always-visible Copy. Source reuses Code Block. It is read-only — not a JSON editor and not a Formily field.

When To Use

• Inspect a parsed blob the operator did not author: task payload or result, workflow step I/O, API request and response in process history.
• Prefer Code Block alone for logs, traceback text, or a JSON file the operator will copy as a document.
• Prefer Descriptions when keys are a known schema (status, id, amount) rather than a free-form object.
• Do not use this as a fill-in control. There is no edit mode in v1.

Features

Installing

Configure @f-ui-plus and FUI_PLUS_REGISTRY_TOKEN as in Installation — Plus Registry.

FUI_PLUS_REGISTRY_TOKEN=xxx pnpm dlx shadcn@latest add @f-ui-plus/json-view

FUI_PLUS_REGISTRY_TOKEN=xxx npx shadcn@latest add @f-ui-plus/json-view

FUI_PLUS_REGISTRY_TOKEN=xxx yarn dlx shadcn@latest add @f-ui-plus/json-view

FUI_PLUS_REGISTRY_TOKEN=xxx bun x shadcn@latest add @f-ui-plus/json-view

registryDependencies: code-block, Empty, Result, Copy Affordance. Runtime: @uiw/react-json-view@2.0.0-alpha.43 (pin the alpha), next-themes.

Usage

import { JsonView } from "@/components/f-ui/json-view/json-view";

export function Example({ payload }: { payload: unknown }) {
  return <JsonView value={payload} />;
}

Examples

Minimal (Default)

A payload card: tree only, no header. Copy a node from the tree itself.

"use client"

import { JsonView } from "@/components/f-ui/json-view/json-view"

const TASK_RESULT = {
  status: "succeeded",
  durationMs: 1840,
  output: {
    ticketId: "INC-1042",
    assignee: { id: "u_9", name: "Ada" },
    steps: [
      { name: "classify", ok: true },
      { name: "notify", ok: true, skipped: false },
    ],
  },
  error: null,
}

export function JsonViewDemo() {
  return <JsonView value={TASK_RESULT} />
}

Chrome

Turn on chrome for Tree | Source and a pinned Copy — same rhythm as Code Block chrome.

"use client"

import { JsonView } from "@/components/f-ui/json-view/json-view"

export function JsonViewDemoChrome() {
  return (
    <JsonView
      chrome
      value={{
        status: "succeeded",
        output: { ticketId: "INC-1042", assignee: { id: "u_9", name: "Ada" } },
      }}
    />
  )
}

JSON String

Hosts that stored the body as a string can pass it through. JsonView parses it; invalid text is an error, not a tree.

"use client"

import { JsonView } from "@/components/f-ui/json-view/json-view"

const WIRE = `{
  "method": "POST",
  "path": "/api/tickets",
  "body": { "title": "Printer offline", "priority": "high" }
}`

export function JsonViewDemoJsonString() {
  return <JsonView value={WIRE} />
}

Edge Cases & Errors

Empty Value

null and undefined are a successful empty inspect — Empty, not an error. Copy is hidden.

"use client"

import { JsonView } from "@/components/f-ui/json-view/json-view"

export function JsonViewDemoEmpty() {
  return <JsonView value={null} />
}

Invalid JSON

A string that does not parse shows Result with recovery-free copy (fix the producer, not the viewer).

"use client"

import { JsonView } from "@/components/f-ui/json-view/json-view"

export function JsonViewDemoInvalidJson() {
  return <JsonView value="{not json" />
}

Circular objects also fail Result: they cannot be serialized for Source or copy-all.

API Reference

Props