@ethicdevs/json-tree-view

A simple JSON Tree View that renders nodes using HTML5 details + summary

Installation

Note: @ethicdevs/json-tree-view is not dependent on any package.

$ yarn add @ethicdevs/json-tree-view
# or
$ npm i @ethicdevs/json-tree-view

Usage

import { renderJSONTreeView } from "@ethicdevs/json-tree-view";

const containerEl = document.querySelector("#json-tree-view-container");
const data = {
  a1: 123,
  b1: "xyz",
  c1: [1.2, 3.4, "5.6", false],
  d1: { cid: "WK2WHS", name: "peter", unique: false },
};

// Magic!
const treeViewAPI = renderJSONTreeView(data, containerEl, {
  expanded: true, // Or set it to false so nodes are not expanded by default.
});

// Then control it!
treeViewAPI.toggle();
treeViewAPI.hideChildren();
treeViewAPI.showChildren();