Visualize JSON Data Like A Pro With JSONTree.js

Category: Javascript | March 20, 2024
Views Total:66 views
Official Page:Go to website
Last Update:March 20, 2024


Visualize JSON Data Like A Pro With JSONTree.js


A tiny JavaScript JSON tree library that allows developers to visualize complex JSON data through a customizable, interactive tree view.

It requires no dependencies, is fully customizable via API, uses CSS/SASS for styling, and supports features like clickable values, expand/collapse all, and configurable property sorting.

How to use it:

1. Load the core stylesheet jsontree.js.css and main script jsontree.js in the document.

<link rel="stylesheet" href="/dist/jsontree.js.css">
<script src="/dist/jsontree.js"></script>

2. Create an empty DIV container for the JSON tree and pass the options to the data-jsontree-options attribute. All possible options and callback functions:

  • data: null REQUIRED
  • showCounts: true
  • useZeroIndexingForArrays: true
  • dateTimeFormat: “{yyyy}-{mm}-{dd}T{hh}:{MM}:{ss}Z”
  • showArrowToggles: true
  • showStringQuotes: true
  • showTitle: true
  • showTitleTreeControls: true
  • showAllAsClosed: true
  • sortPropertyNames: true
  • sortPropertyNamesInAlphabeticalOrder: true
  • howCommas: false
  • ignoreNullValues: false
  • ignoreFunctionValues: false
  • reverseArrayValues: false
  • addArrayIndexPadding: false
  • showTitleCopyButton: false
  • showValueColors: true
  • maximumDecimalPlaces: 2
  • ignoreUnknownValues: false
  • onBeforeRenderComplete(e): null
  • onRenderComplete(element): null
  • onValueClick(value): null
  • onRefresh(element): null
  • onCopyAll(data): null
  • onOpenAll(element): null
  • onCloseAll(element): null
  • onDestroy(element): null
  • onBooleanRender(element): null
  • onDecimalRender(element): null
  • onNumberRender(element): null
  • onStringRender(element): null
  • onDateRender(element): null
  • onFunctionRender(element): null
  • onNullRender(element): null
  • onUnknownRender(element): null
<div id="json-tree" data-jsontree-options=" 'data': [ YOUR JSON DATA HERE], 'onRenderComplete': yourCustomFunction"></div>

3. Set global options.

  objectText: "object",
  arrayText: "array",
  closeAllButtonText: "Close All",
  openAllButtonText: "Open All",
  copyAllButtonText: "Copy All",
  safeMode: true,
  highlightAllDomElementTypes: "*",
  objectErrorText: "Errors in object: {{error_1}}, {{error_2}}",
  attributeNotValidErrorText: "The attribute '{{attribute_name}}' is not a valid object.",
  attributeNotSetErrorText: "The attribute '{{attribute_name}}' has not been set correctly.",

4. More API methods.

// refresh
// regresh all
// render 
$jsontree.render(element, options)
// render all
// open all
// close all
// destroy
// return an array of element IDs that have been rendered

5. Override the default CSS variables to create your own styles.

:root {
    // Fonts
    --json-tree-js-default-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --json-tree-js-text-bold-weight: 400;
    --json-tree-js-header-bold-weight: 900;
    --json-tree-js-title-bold-weight: var(--json-tree-js-header-bold-weight);
    --json-tree-js-text-bold-weight-active: var(--json-tree-js-header-bold-weight);
    // Colors
    --json-tree-js-color-black: #3b3a3a;
    --json-tree-js-color-white: #F5F5F5;
    --json-tree-js-color-snow-white: #F5F5F5;
    // Colors - Types
    --json-tree-js-color-boolean: #FF0000;
    --json-tree-js-color-number: #666bf9;
    --json-tree-js-color-string: #78b13f;
    --json-tree-js-color-date: #a656f5;
    --json-tree-js-color-array: #F28C28;
    --json-tree-js-color-object: #C0C0C0;
    --json-tree-js-color-null: #BBBBBB;
    --json-tree-js-color-function: #BBBBBB;
    // Containers
    --json-tree-js-container-background-color: #22272e;
    --json-tree-js-container-border-color: #454c56;
    // Button
    --json-tree-js-button-background-color: #2d333b;
    --json-tree-js-button-border-color: var(--json-tree-js-container-border-color);
    --json-tree-js-button-text-color: var(--json-tree-js-color-white);
    --json-tree-js-button-background-color-hover: var(--json-tree-js-container-border-color);
    --json-tree-js-button-text-color-hover: var(--json-tree-js-color-snow-white);
    --json-tree-js-button-background-color-active: #616b79;
    --json-tree-js-button-text-color-active: var(--json-tree-js-color-snow-white);
    // Borders
    --json-tree-js-border-radius: 0.5rem;
    --json-tree-js-border-style-scrollbar: inset 0 0 6px var(--json-tree-js-color-dark-gray);
    --json-tree-js-border-size: 0.5px;
    // Sizes
    --json-tree-js-spacing: 10px;
    --json-tree-js-spacing-font-size: 0.85rem;
    // Transitions
    --json-tree-js-transition: all .3s;


v0.8.0 (03/20/2024)

  • Added more options and callbacks.

v0.7.0 (03/14/2024)

  • Added more options and callbacks.

v0.6.0 (03/06/2024)

  • Bugfixed
  • Adde new options

v0.5.1 (02/27/2024)

  • Bugfixed

v0.5.0 (02/26/2024)

  • Added more callbacks, and methods

v0.4.0 (02/26/2024)

  • Added more options, callbacks, and methods

v0.3.0 (02/25/2024)

  • Added more options, callbacks, and methods

You Might Be Interested In:

Leave a Reply