Visualize JSON Data Like A Pro With JSONTree.js

Category: Javascript | July 10, 2024
Views Total:50 views
Official Page:Go to website
Last Update:July 10, 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-js attribute. All possible options and callback functions:

  • data: null REQUIRED
  • showCounts: true
  • useZeroIndexingForArrays: true
  • dateTimeFormat: “{dd}{o} {mmmm} {yyyy} {hh}:{MM}:{ss}”
  • showArrowToggles: true
  • showStringQuotes: true
  • showArrayItemsAsSeparateObjects: false
  • copyOnlyCurrentPage: false
  • title.text: “Title Text”
  • true
  • title.showTreeControls: true
  • title.showCopyButton
  • showAllAsClosed: true
  • sortPropertyNames: true
  • sortPropertyNamesInAlphabeticalOrder: true
  • howCommas: false
  • ignore.booleanValues: false
  • ignore.decimalValues: false
  • ignore.numberValues: false
  • ignore.stringValues: false
  • ignore.dateValues: false
  • ignore.objectValues: false
  • ignore.arrayValues: false
  • reverseArrayValues: false
  • addArrayIndexPadding: false
  • showValueColors: true
  • showStringHexColors: false
  • maximumDecimalPlaces: 2
  • maximumStringLength: 0
  • events.onBeforeRenderComplete(e): null
  • events.onRenderComplete(element): null
  • events.onValueClick(value): null
  • events.onRefresh(element): null
  • events.onCopyAll(data): null
  • events.onOpenAll(element): null
  • events.onCloseAll(element): null
  • events.onDestroy(element): null
  • events.onBooleanRender(element): null
  • events.onDecimalRender(element): null
  • events.onNumberRender(element): null
  • events.onStringRender(element): null
  • events.onDateRender(element): null
  • events.onFunctionRender(element): null
  • events.onNullRender(element): null
  • events.onUnknownRender(element): null
  • events.onValueClick(type): null
<div id="json-tree" data-jsontree-js=" 'data': [ YOUR JSON DATA HERE]></div>

3. Set global options.

  safeMode: true,
  highlightAllDomElementTypes: "*",
  text: {
    objectText: "object",
    arrayText: "array",
    closeAllButtonText: "Close All",
    openAllButtonText: "Open All",
    copyAllButtonText: "Copy All",
    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.",
    stText: "st",
    ndText: "nd",
    rdText: "rd",
    thText: "th",
    dayNames: [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" ]’).
    dayNamesAbbreviated: "[ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ],
    monthNames: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ],
    monthNamesAbbreviated: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
    ellipsisText: "...",
    closeAllButtonSymbolText: "↓",
    openAllButtonSymbolText: "↑",
    copyAllButtonSymbolText: "❐",
    backButtonText: "Back",
    nextButtonText: "Next",
    backButtonSymbolText: "←",
    nextButtonSymbolText: "→",

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;


v2.1.0 (07/10/2024)

  • Added more options
  • Code improvement

v2.0.0 (07/10/2024)

  • Rewritten in TypeScript

v1.1.1 (06/17/2024)

  • Added export support

v1.1.0 (06/16/2024)

  • Added more options and callbacks.

v1.0.0 (06/13/2024)

  • Added more options and callbacks.

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