Object Visualizer
Visualize the JSON object to the DOM.
Live Demo
Feature
Nested values
- 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
- Import the mount function from the module
import { mount } from "object-visualizer";- 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");-
Have your data on a variable
-
Use mount function
mount(data, preEl);- Thats it!!
