JsonViewer

Polished JSON tree viewer with token-driven syntax coloring, metadata, collapse controls, and copy.

#Default usage

<JsonViewer
  ariaLabel="Workspace settings JSON"
  data={{ workspace: { id: "ws_42", name: "Frogg" }, plan: "pro", limits: { seats: 10, projects: 50 } }}
  defaultExpandedDepth={2}
  height={220}
  label="Settings"
/>

#Import

import { JsonViewer } from "@froggdesign/enter-ui-react";

#Accessibility

Tree root is role="tree" and can be labelled with ariaLabel. Each collapsible node uses aria-expanded on a real <button> toggle so keyboard users can fold/unfold subtrees.

#API

• ariaLabel: accessible label for the tree viewport.
• data: arbitrary JSON-serialisable value.
• defaultExpandedDepth: number of levels initially expanded (default 1).
• hideToolbar: render only the tree viewport.
• height: viewport height in px.
• label: toolbar heading, defaulting to JSON.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.