xfynx / dom-json-tree

Visualize the JSON object to the DOM.

DOM JSON Tree

Visualize the JSON object to the DOM.

Usage

// import module
import DomJsonTree from 'dom-json-tree';

let djt = new DomJsonTree(json, document.body);
djt.render();

Options

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

# Install npm packages
npm i

Running

# Watch JS & CSS
npm run watch

Open "test/index.html" in a browser

Library

• Superfine - View

Deployment

# 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