jjsontree.js
Advanced tools
A lightweight JavaScript library that generates customizable tree views to better visualize, and edit, JSON data.
🔗 A lightweight JavaScript library that generates customizable tree views to better visualize, and edit, JSON data.
v2.8.1
All the documentation can be found here.
All modern browsers (such as Google Chrome, FireFox, and Opera) are fully supported.
boolean Booleansnumber Numbersbigint Big Integersstring Stringsobject Objectsobject Array Arraysobject Date Datesnumber Decimalsnull Nullssymbol Symbolsfunction Functions and Lambdasundefined Undefinedcolor Colorsguid GUIDsany Unknown
af Afrikaansar Arabichy Armenianbe Belarusianbn Bengalibg Bulgarianca Catalanzh Chinese (simplified)da Danishnl Dutchen English (default)eo Esperantoet Estonianfa Farsifi Finnishfr Frenchfy Frisiangl Galicianka Georgiande Germanel Greekhe Hebrewhi Hindihu Hungarianis Icelandicid Indonesianga Irishit Italianja Japaneseko Koreanlv Latvianlt Lithuanianlb Luxembourgishms Malayne Nepalino Norwegianpl Polishpt Portuguesero Romaniansi Sinhalesesk Slovaksl Slovenianes Spanishsv Swedishtl Tagalogta Tamilzh-tw Taiwanesete Teluguth Thaitr Turkishuk Ukrainian
To see a list of all the most recent changes, click here.
You can install the library with npm into your local modules directory using the following command:
npm install jjsontree.js
You can also use the following CDN links:
https://cdn.jsdelivr.net/gh/williamtroup/JsonTree.js@2.8.1/dist/jsontree.min.js
https://cdn.jsdelivr.net/gh/williamtroup/JsonTree.js@2.8.1/dist/jsontree.js.min.css
To get started using JsonTree.js, do the following steps:
Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows:
<!DOCTYPE html>
<link rel="stylesheet" href="dist/jsontree.js.css">
<script src="dist/jsontree.js"></script>
<div id="tree-1" data-jsontree-js="{ 'showCounts': true, 'data': [ true, false, 5, 10, 'A String' ] }">
Your HTML.
</div>
To see a list of all the available binding options you can use for "data-jsontree-js", click here.
To see a list of all the available custom triggers you can use for "data-jsontree-js", click here.
That's it! Nice and simple. Please refer to the code if you need more help (fully documented).
To customize, and get more out of JsonTree.js, please read through the following documentation.
To see a list of all the public functions available, click here.
Configuration options allow you to customize how JsonTree.js will function. You can set them as follows:
<script>
$jsontree.setConfiguration( {
safeMode: false
} );
</script>
To see a list of all the available configuration options you can use, click here.
FAQs
A lightweight JavaScript library that generates customizable tree views to better visualize, and edit, JSON data.
The npm package jjsontree.js receives a total of 159 weekly downloads. As such, jjsontree.js popularity was classified as not popular.
We found that jjsontree.js demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."