@tanish-chauhan/json-viewer-core

A framework-agnostic JSON tree viewer for browser apps. It renders expandable/collapsible JSON, includes search, copy, light/dark themes, and chunked rendering for large payloads.

Install

npm install @tanish-chauhan/json-viewer-core

Quick Start

import { JsonViewer } from "@tanish-chauhan/json-viewer-core";

const container = document.getElementById("viewer")!;  // You can also modify your container name as per your requirement

const data = {
  app: "json-viewer",
  version: 1,
  tags: ["core", "ui", "json"]
};

const viewer = new JsonViewer(container, data, {
  theme: "light",
  initialExpandedDepth: 1,
  showToolbar: true,
  showSearch: true
});

viewer.render();

API

• new JsonViewer(container, data, options?)
• render()
• setData(data)
• setTheme("light" | "dark")
• setSearch(term)
• setOptions(partialOptions)
• expandAll()
• collapseAll()
• destroy()

Options

• theme: "light" | "dark" (default: "light")
• initialExpandedDepth: number (default: 1)
• showToolbar: boolean (default: true)
• showSearch: boolean (default: true)
• chunkSize: number (default: 200)
• className: string
• onCopy: (path, value) => void

Description

Framework-agnostic JSON viewer for browsers with tree navigation, search, copy, themes, and large-data rendering.