This is a JavaScript library for displaying JSON data in the DOM. Demo link
npm install '@pgrabovets/json-view'Import the jsonview library from the npm package:
import jsonview from "@pgrabovets/json-view";Or include jsonview.umd.cjs and jsonview.css from the dist directory in your HTML page:
<link href="jsonview.css" rel="stylesheet" /> <script src="jsonview.umd.cjs"></script>Get JSON data and render the tree into the DOM:
// get json data const data = '{"name": "json-view","version": "1.0.0"}'; // create json tree object const tree = jsonview.create(data); // render tree into dom element jsonview.render(tree, document.querySelector(".tree")); // you can render JSON data without creating a tree manually const tree = jsonview.renderJSON(data, document.querySelector(".tree"));Control methods:
// expand tree jsonview.expand(tree); // collapse tree jsonview.collapse(tree); // traverse tree object jsonview.traverse(tree, function (node) { console.log(node); }); // toggle between show and hide jsonview.toggleNode(tree); // destroy and unmount JSON tree from the DOM jsonview.destroy(tree);<!DOCTYPE html> <html> <head> <link href="dist/jsonview.css" rel="stylesheet" /> <title>JSON VIEW</title> </head> <body> <div class="root"></div> <script type="text/javascript" src="dist/jsonview.umd.cjs"></script> <script type="text/javascript"> fetch("dist/example2.json") .then((res) => { return res.text(); }) .then((data) => { const tree = jsonview.create(data); jsonview.render(tree, document.querySelector("#root")); jsonview.expand(tree); }) .catch((err) => { console.log(err); }); </script> </body> </html>import "@pgrabovets/json-view/style.css"; import jsonview from "@pgrabovets/json-view"; fetch("example2.json") .then((res) => { return res.text(); }) .then((data) => { const tree = jsonview.create(data); jsonview.render(tree, document.querySelector(".root")); jsonview.expand(tree); }) .catch((err) => { console.log(err); });$ npm install $ npm run dev $ npm run build open http://localhost:5173/