object-visualizer

Object Visualizer

Visualize the JSON object to the DOM.

Live Demo

As same as Chrome's object tree

Feature

Reactivity

Fully Configurable

Expand/Collapse Hot Keys

Installation

$ npm install object-visualizer
<script src="https://unpkg.com/object-visualizer"></script>
<link
  type="text/css"
  rel="stylesheet"
  href="https://unpkg.com/object-visualizer/dist/index.css"
/>

How to use

  1. Import the mount function from the module
import { mount } from "object-visualizer";
  1. Query the HTML element to inject the JSON, e.g. <pre id="app"></pre>
//Vanilla JS
const preEl = document.getElementById("app");
//Vanilla JS new dom api
const preEl = document.querySelector("#app");
//jQuery
const preEl = $("#app");
  1. Have your data on a variable
const data = {};

Optional: To make DOM reactivity, just wrap your data via reactive function before mount it.

import { reactive } from "object-visualizer";

const data = reactive({});
  1. Use mount function
mount(data, preEl);
  1. Thats it!!

Options

// path will be string[]
const options = {
  getKeys: (object, path) => {
    return Object.keys(object).sort();
  },
  expandOnCreatedAndUpdated: (path) => {
    // [shouldExpand, isRecursive]
    return [true, true];
  },
};

mount(data, preEl, options);

License

MIT