High-Performance JSON Viewer

A lightweight, dependency-free JSON viewer that renders JSON data into a human-readable, collapsible tree.

Features

• Pure JavaScript: No external libraries or frameworks required.
• Collapsible Nodes: Easily expand and collapse nested objects and arrays.
• Global Controls: Programmatically expand or collapse all nodes at once.
• Customizable: Options to control initial collapsed state, max depth, and more.
• Syntax Highlighting: Differentiates between strings, numbers, booleans, and null values.
• Modern Styling: Styled with Tailwind CSS for a clean and responsive UI.

Demos

PLayground
Demo Codepen

$ npm i jsnview
# or
$ yarn add jsnview

Usage

import jsnview from "jsnview";

Or include it via jsDelivr CDN (UMD):

<script src="https://cdn.jsdelivr.net/npm/jsnview/dist/index.js"></script>
<!-- Access via global object : window.jsnview -->

Usage

Use the following code to initialize the viewer.

const data = {
  key1: "value1",
  key2: 123,
  key3: true,
  key4: [1, 2, 3],
  key5: {
    nestedKey: "nestedValue",
  },
};

const options = {
  collapsed: false,
  showLen: true,
  showType: false,
  showFoldmarker: true,
  maxDepth: Infinity,
};

const viewer = new Jsnview(data, options);

Notes

• All pull requests are welcome, feel free.

Author

• Haikel Fazzani

License

Apache License 2.0