pissang/object-visualizer

Vue JSON inspector with Chrome-like theme.

Object Visualizer

Visualize the JSON object to the DOM.

Live Demo

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";

2. 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");

3. 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({});

4. Use mount function

mount(data, preEl);

5. 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.