JsonTree.js
🔗 A lightweight JavaScript library that generates customizable tree views to better visualize JSON data.
v0.5.0
What features does JsonTree.js have?
- Zero-dependencies and extremely lightweight!
- Full API available via public functions.
- Fully styled in CSS/SASS, fully responsive, and compatible with the Bootstrap library.
- Full CSS theme support (using :root variables).
- Fully configurable per DOM element.
- Close/Open all.
- Clickable values!
Where can I find the documentation?
All the documentation can be found here:
What browsers are supported?
All modern browsers (such as Google Chrome, FireFox, and Opera) are fully supported.
What are the most recent changes?
To see a list of all the most recent changes, click here.
How do I install JsonTree.js?
You can install the library with npm into your local modules directory using the following command:
npm install jjsontree.js
How do I get started?
To get started using JsonTree.js, do the following steps:
1. Prerequisites:
Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows:
<!DOCTYPE html>
2. Include Files:
<link rel="stylesheet" href="dist/jsontree.js.css">
<script src="dist/jsontree.js"></script>
3. DOM Element Binding:
<div id="tree-1" data-jsontree-options="{ '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-options", click here.
To see a list of all the available custom triggers you can use for "data-jsontree-options", click here.
4. Finishing Up:
That's it! Nice and simple. Please refer to the code if you need more help (fully documented).
How do I go about customizing JsonTree.js?
To customize, and get more out of JsonTree.js, please read through the following documentation.
1. Public Functions:
To see a list of all the public functions available, click here.
2. Configuration:
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.