Need help with object-visualizer?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

iendeavor
154 Stars 6 Forks MIT License 171 Commits 1 Opened issues

Description

Vue JSON inspector with Chrome-like theme.

Services available

!
?

Need anything else?

Contributors list

# 73,312
Python
Django
Shell
data-st...
110 commits
# 28
echarts
Shell
Electro...
TypeScr...
1 commit

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

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.
//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) => {
    return true;
  },
};

mount(data, preEl, options);

License

MIT

Donate

If this library helped you out feel free to donate.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.