JSON Viewer

Data

Collapsible JSON tree viewer with syntax highlighting and configurable expand depth.

JSON Viewer — collapsible tree with syntax highlighting

"response": "user": "id": 42,"name": "Alice Chen","email": "alice@example.com","active": true,"roles": ,"meta": },"pagination": "page": 1,"perPage": 20,"total": 142}}

Instalação via CLI

$ npx kikitocn add json-viewer

Interno:

@/lib/utils

Exemplo de uso

JSON ViewerExample.tsx

import { JSONViewer } from "@/components/ui/cn/json-viewer/JSONViewer";

export function JSONViewerExample() {
  return (
    <JSONViewer />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`data*`	`unknown`	—	Objeto/array JSON a visualizar
`defaultExpandDepth`	`number`	`2`	Profundidade inicial de expansão automática
`name`	`string`	`undefined`	Nome do nó raiz exibido
`collapsed`	`boolean`	`false`	Inicia com todos os nós colapsados

Voltar para Data

Carregando…