Implementation:Ucbepic Docetl PrettyJSON

Knowledge Sources	Ucbepic_Docetl
Domains	Frontend, React_UI
Last Updated	2026-02-08 00:00 GMT

Overview

Concrete tool for the interactive, collapsible JSON viewer component used in data cell displays.

Description

The PrettyJSON component renders arbitrary JSON data as an interactive, syntax-highlighted tree view. Arrays and objects are collapsible with chevron indicators showing item/property counts. All paths are expanded by default on initial render. Values are color-coded by type: strings in emerald, numbers in blue, booleans in purple, and null/undefined in red. The component is wrapped in React.memo for performance and uses a recursive renderValue function to handle nested structures.

Usage

Used by ColumnDialog and other cell display components to render structured JSON data in a readable, interactive format.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/PrettyJSON.tsx
• Lines: 1-145

Signature

interface PrettyJSONProps {
  data: unknown;
}

export const PrettyJSON = React.memo(({ data }: PrettyJSONProps) => { ... })

Import

import { PrettyJSON } from "@/components/PrettyJSON";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
data	unknown	Yes	Any JSON-compatible data to render

Outputs

Name	Type	Description
rendered	JSX.Element	Interactive collapsible JSON tree view

Usage Examples

<PrettyJSON data={{ name: "Alice", scores: [95, 87, 92], active: true }} />

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment