JSON Viewer
JSON viewer. Pro · Data and metrics › Lists and trees
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add json-viewer
npm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { JSONViewer } from 'valyro-ui-pro';
Props
| Prop | Type | Default | |
|---|---|---|---|
data * | JSONValue | Parsed JSON value shown as a collapsible tree; the copy button copies it pretty-printed. | |
defaultExpandDepth | number | 1 | Objects and arrays shallower than this start expanded (0 = all collapsed). |
maxStringLength | number | 120 | Strings longer than this are cut with a button to show the rest. Infinity disables it. |
labels | Partial<JSONViewerLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- List Block — List with images or icons, descriptions and values
- Description List — Key–value list: stacked, inline or a grid with icons
- Tree View — Tree structures
- Accordion — Collapsible sections
- Sortable — Drag-and-drop sorting
- Timeline — Event timeline
- Data Table — Tables with search and sorting
- Data Grid — Grid for 100,000 rows: grouping, filters, inline editing
- Virtual List — Virtual list for 100,000 rows
- Bulk Action Bar — Actions for selected rows, with keyboard shortcuts
- Card — All-purpose cards
- Item Card — Row card: icon, title, description and a control on the right
Previous: Sortable · Next: Timeline · All Data and metrics