InkUI
Components

JSONViewer

Interactive JSON explorer with collapsible nodes and syntax coloring.

Explore JSON data interactively with expand/collapse, keyboard navigation, and syntax coloring.

Live Preview
JSONViewer · expand/collapse
root {
"name": "InkUI"
"config": {...}
"debug": false
"port": 3000
"version": "0.4.0"
}
~/my-cli — node v22● running

Installation

npx inkui add json-viewer

Usage

import { JSONViewer } from './components/ui/json-viewer';
 
const data = {
  name: 'InkUI',
  version: '0.3.0',
  config: { debug: false, port: 3000 },
  tags: ['terminal', 'ink', 'react'],
};
 
export default function App() {
  return (
    <JSONViewer
      data={data}
      initialDepth={2}
      rootLabel="config"
    />
  );
}

Keyboard Shortcuts

KeyAction
/ kPrevious node
/ jNext node
/ l / SpaceExpand
/ hCollapse
gFirst node
GLast node

Color Coding

TypeColor
Stringsuccess (green)
Numberwarning (yellow)
Booleaninfo (blue)
Nullmuted
Keystext

API Reference

PropTypeDefaultDescription
dataanyJSON data (required)
initialDepthnumber1Auto-expand depth
maxHeightnumberMax visible rows
showTypesbooleanfalseShow type annotations
showIndicesbooleantrueShow array indices
rootLabelstring'root'Root node label
focusbooleantrueAccept keyboard input
themeInkUIThemedarkThemeColor theme

On this page