Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/t4y3/dom-json-tree
Visualize the JSON object to the DOM.
https://github.com/t4y3/dom-json-tree
dom dom-json-tree json superfine visualize
Last synced: 3 months ago
JSON representation
Visualize the JSON object to the DOM.
- Host: GitHub
- URL: https://github.com/t4y3/dom-json-tree
- Owner: t4y3
- Created: 2018-07-22T06:50:05.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T22:38:57.000Z (about 2 years ago)
- Last Synced: 2024-08-09T18:33:57.743Z (6 months ago)
- Topics: dom, dom-json-tree, json, superfine, visualize
- Language: JavaScript
- Size: 1.77 MB
- Stars: 4
- Watchers: 2
- Forks: 3
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DOM JSON Tree
[](Version)Visualize the JSON object to the DOM.
## Usage
```js
// import module
import DomJsonTree from 'dom-json-tree';let djt = new DomJsonTree(json, document.body);
djt.render();
```### Options
```js
let djt = new DomJsonTree(json, document.body, {
colors: {
key: "#008080",
type: "#546778",
typeNumber: "#000080",
typeString: "#dd1144",
typeBoolean: "#000080"
}
});
```## Demo
- https://codesandbox.io/s/82z7w16lw0## Screenshot
## Development
#### Installing
```sh
# Install npm packages
npm i
```### Running
```sh
# Watch JS & CSS
npm run watch
```
Open "test/index.html" in a browser#### Library
- [Superfine](https://github.com/jorgebucaran/superfine) - View## Deployment
```sh
# Build
npm run build# Test
npm run test# Version Up
npm version major|minor|patch# Publishes a package to the registry
npm publish# Update master branch
git push origin master# Push git tags
git push origin --tags
```