noob-components/.trellis/tasks/archive/2026-04/04-09-json-view-virtualized-pretty/prd.md

Build Virtualized json-view Component

Goal

Build a new json-view component under packages/base/data/ that behaves similarly to vue-json-pretty, with strong support for large payloads via virtual scrolling and a more DOM-efficient rendering strategy.

Requirements

• Create a new base component alongside list-table-v2.vue.
• Render formatted JSON objects/arrays/primitives in an interactive tree viewer.
• Keep the supported public API close to vue-json-pretty where practical.
• Support most vue-json-pretty viewer features except:
  • selector
  • inline editing
• Support expand/collapse interactions.
• Support virtual scrolling for large JSON trees.
• Reuse and adapt relevant pretext-based utilities from packages/base/data/list-table-v2/ where useful.
• Optimize DOM output aggressively compared with vue-json-pretty, including:
  • sharing one indentation element across multiple contiguous lines of the same level where possible
  • using CSS pseudo-elements for affordances such as expand/collapse icons
• Place the component implementation under packages/base/data/, near list-table-v2.vue.

Feature Targets Compared to vue-json-pretty

• Tree expansion/collapse
• Key/value display for objects
• Array index display
• Primitive type styling
• Empty object/array handling
• Path-aware rendering as needed for stable keys and interactions
• Optional depth/default-expand behavior
• showLine, showLineNumber, showIcon, showDoubleQuotes
• collapsedNodeLength, deep, collapsedOnClickBrackets
• render hooks/slots for node key and value
• virtual list controls such as virtual, height, itemHeight
• Virtualized rendering of visible rows

Acceptance Criteria

• A new json-view component exists under packages/base/data/
• Component can render nested JSON structures with correct formatting
• Expand/collapse works for objects and arrays
• Large JSON payloads render with virtualization rather than mounting every visible line at once
• DOM structure is materially leaner than a naive per-line/per-indent implementation
• Shared utilities are reused where it improves consistency with list-table-v2
• Public API stays close to vue-json-pretty for the supported subset
• Public API is documented in code/types and is coherent for consumers
• npm run type-check passes

Technical Notes

• Likely architecture:
  • normalize JSON into a flat row model representing visible logical lines
  • track expansion state by stable path keys
  • compute visible rows from expansion state
  • use a virtualizer similar to useVirtualRows from list-table-v2
• DOM minimization ideas to validate:
  • row text assembled with fewer wrapper nodes
  • indentation rendered via CSS background/pseudo-elements where practical
  • toggle affordances rendered without dedicated icon nodes
• Need targeted research on:
  • vue-json-pretty feature surface and prop API
  • DOM-efficient strategies for indentation/toggles/row assembly