@lang/object-visualizer

Visualize JSON object to DOM.

Usage no npm install needed!

<script type="module">
  import langObjectVisualizer from 'https://cdn.skypack.dev/@lang/object-visualizer';
</script>

README

Object Visualizer

Visualize the JSON object to the DOM.

E2E on Chrome visitors donate

Live Demo

As same as Chrome's object tree

Feature

Reactivity

Fully Configurable

  • option.getKeys: customize visible keys in any nested data
  • option.expandOnCreatedAndUpdated: expand or collapse after created or updated

Expand/Collapse Hot Keys

Starting from v4.0.0, this feature is only available for objects due to performance issues.

  • Recursive expand Meta+Click
  • Recursive collapse Meta+Shift+Click

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

const options = {
  rootName: string,
  getKeys: (object: any, path: string[]) => {
    return Object.keys(object).sort();
  },
  expandOnCreatedAndUpdated: (path: string[]) => {
    return true;
  },
};

mount(data, preEl, options);

License

MIT

Donate

If this library helped you out feel free to donate.