JSON Output

"name":"nteract elements",

"version":"0.1.0",

"ANSI",

"Markdown",

"Images",

"JSON"

"theme":"light",

"expandDepth":2

}

Component for rendering JSON data in an interactive, expandable tree view. Useful for inspecting complex data structures, API responses, and object representations from Jupyter kernels.

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/json-output.json

Copy the component to your project from the registry source.

You'll also need the Collapsible primitive.

Usage

import { JsonOutput } from "@/registry/outputs/json-output"

export function Example() {
  const data = {
    users: [
      { id: 1, name: "Alice" },
      { id: 2, name: "Bob" }
    ],
    total: 2
  }
  
  return <JsonOutput data={data} />
}

Props

Prop	Type	Default	Description
`data`	`unknown`	—	The JSON data to render
`collapsed`	`boolean \| number`	`false`	Collapse depth (`false` = expand all, number = depth limit)
`displayDataTypes`	`boolean`	`false`	Show data types alongside values
`className`	`string`	`""`	Additional CSS classes

Collapsed View

Use collapsed to limit the initial expansion depth:

}

<JsonOutput data={deepData} collapsed={1} />

Jupyter Integration

JSON outputs come from display_data or execute_result messages with application/json MIME type:

function renderOutput(output: JupyterOutput) {
  const data = output.data;
  
  if (data["application/json"]) {
    return <JsonOutput data={data["application/json"]} />
  }
  
  return null;
}

Parsing String Input

When receiving JSON as a string (e.g., from user input or text fields), parse it before rendering:

"use client";

import { useState } from "react";
import { JsonOutput } from "@/registry/outputs/json-output";

export function JsonStringViewer() {
  const [input, setInput] = useState('{"name": "example", "count": 42}');
  const [error, setError] = useState<string | null>(null);
  const [parsed, setParsed] = useState<unknown>(null);

  const handleParse = () => {
    try {
      const data = JSON.parse(input);
      setParsed(data);
      setError(null);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Invalid JSON");
      setParsed(null);
    }
  };

  return (
    <div className="space-y-4">
      <textarea
        value={input}
        onChange={(e) => setInput(e.target.value)}
        className="w-full rounded border p-2 font-mono text-sm"
        rows={4}
      />
      <button onClick={handleParse}>Parse JSON</button>
      {error && <p className="text-red-500">{error}</p>}
      {parsed && <JsonOutput data={parsed} />}
    </div>
  );
}

Common Use Cases

Data Type	Example
API responses	`fetch()` results
DataFrame info	`.info()`, `.describe()`
Model parameters	scikit-learn estimators
Config objects	Settings, metadata