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: 10 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 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T22:38:57.000Z (about 3 years ago)
• Last Synced: 2025-03-26T17:11:24.337Z (11 months ago)
• Topics: dom, dom-json-tree, json, superfine, visualize
• Language: JavaScript
• Size: 1.77 MB
• Stars: 4
• Watchers: 1
• Forks: 3
• Open Issues: 17
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# DOM JSON Tree

[![Version](https://img.shields.io/badge/dynamic/json.svg?label=version&colorB=5f9ea0&query=$.version&uri=https:%2F%2Fraw.githubusercontent.com%2Ft4y3%2Fdom-json-tree%2Fmaster%2Fpackage.json&prefix=v)](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

![_users_y41132_scm_github_etc_dom-json-tree_test_index html](https://user-images.githubusercontent.com/9010553/56467655-b18baa80-645c-11e9-8329-295006a1f7ff.png)

## 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

```