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.
v4.4.0
You can view all the examples here.
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 Objectsarray Arraysdate Datesfloat Floatsnull Nullssymbol Symbolsfunction Functionslambda Lambdasundefined Undefinedcolor Colorsguid GUIDsregexp RegExpsmap Mapsset Setsurl URLsimage Imagesemail Emailshtml HTMLany 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 Ukrainianvi Vietnamese
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
Or, you can download the latest zipped up version here.
Or, you can also use the following CDN links:
https://cdn.jsdelivr.net/gh/williamtroup/JsonTree.js@4.4.0/dist/jsontree.min.js
https://cdn.jsdelivr.net/gh/williamtroup/JsonTree.js@4.4.0/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="{ 'showObjectSizes': 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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.