Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/williamtroup/JsonTree.js
🔗 A lightweight JavaScript library that generates customizable tree views to better visualize JSON data.
https://github.com/williamtroup/JsonTree.js
css html javascript json tree treeview visualization visualize visualizer
Last synced: about 1 month ago
JSON representation
🔗 A lightweight JavaScript library that generates customizable tree views to better visualize JSON data.
- Host: GitHub
- URL: https://github.com/williamtroup/JsonTree.js
- Owner: williamtroup
- License: mit
- Created: 2024-02-22T15:15:08.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-07-09T16:48:32.000Z (2 months ago)
- Last Synced: 2024-07-10T02:43:24.388Z (2 months ago)
- Topics: css, html, javascript, json, tree, treeview, visualization, visualize, visualizer
- Language: TypeScript
- Homepage: https://www.william-troup.com/jsontree-js/
- Size: 555 KB
- Stars: 177
- Watchers: 2
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- my-awesome-list - JsonTree.js
README
JsonTree.js
[](https://twitter.com/intent/tweet?text=JsonTree.js%2C%20a%20free%20JavaScript%json%20treeview&url=https://github.com/williamtroup/JsonTree.js&hashtags=javascript,treeview,json)
[](https://www.npmjs.com/package/jjsontree.js)
[](https://www.nuget.org/packages/jJsonTree.js/)
[](https://github.com/williamtroup/JsonTree.js/blob/main/LICENSE.txt)
[](https://github.com/williamtroup/JsonTree.js/discussions)
[](https://william-troup.com/)
>
🔗 A lightweight JavaScript library that generates customizable tree views to better visualize JSON data.
> v2.1.0
What features does JsonTree.js have?
- Zero-dependencies and extremely lightweight!
- Written in TypeScript, allowing greater support for React, Angular, and other libraries!
- 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!
- Custom value rendering.
- Array paging support (show array objects on different pages)!
Where can I find the documentation?
All the documentation can be found [here](https://www.william-troup.com/jsontree-js/documentation/index.html).
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](https://www.william-troup.com/jsontree-js/documentation/recent-changes.html).
How do I install JsonTree.js?
You can install the library with npm into your local modules directory using the following command:
```markdown
npm install jjsontree.js
```
You can also use the following CDN links:
```markdown
https://cdn.jsdelivr.net/gh/williamtroup/[email protected]/dist/jsontree.min.js
https://cdn.jsdelivr.net/gh/williamtroup/[email protected]/dist/jsontree.js.min.css
```
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:
```markdown
```
### 2. Include Files:
```markdown
```
### 3. DOM Element Binding:
```markdown
Your HTML.
```
To see a list of all the available binding options you can use for "data-jsontree-js", click [here](https://www.william-troup.com/jsontree-js/documentation/binding-options.html).
To see a list of all the available custom triggers you can use for "data-jsontree-js", click [here](https://www.william-troup.com/jsontree-js/documentation/binding-options-custom-triggers.html).
### 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](https://www.william-troup.com/jsontree-js/documentation/public-functions.html).
### 2. Configuration:
Configuration options allow you to customize how JsonTree.js will function. You can set them as follows:
```markdown
$jsontree.setConfiguration( {
safeMode: false
} );
```
To see a list of all the available configuration options you can use, click [here](https://www.william-troup.com/jsontree-js/documentation/options.html).