Skip to content
This repository was archived by the owner on Jan 18, 2025. It is now read-only.

soc221b/object-visualizer

Repository files navigation

Object Visualizer

A vue component to visualize the JSON object to the DOM.

Live Demo

As same as Chrome's object tree As same as Chrome's object tree

Feature

  • getKeys: customize visible keys in any nested data

  • expandOnCreatedAndUpdated: expand or collapse after created or updated

    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
  • Light/Dark mode

Installation

NPM

$ npm install object-visualizer 
import { ObjectVisualizer } from 'object-visualizer' import 'object-visualizer/dist/index.min.css'

CDN

<script src="https://unpkg.com/object-visualizer"></script> <link type="text/css" rel="stylesheet" href="https://unpkg.com/object-visualizer/dist/index.min.css" /> <script> const { ObjectVisualizer } = window.ObjectVisualizer </script>

Usage

<ObjectVisualizer :data="['foo', 'bar']" rootName="Data" :expandOnCreatedAndUpdated="(path) => false" :getKeys="(object, path) => Object.keys(object)" ></ObjectVisualizer>

About

Buy Me A Coffee

Distributed under the MIT license. See LICENSE for more information.

https://github.com/iendeavor

About

Vue JSON inspector with Chrome-like theme.

Topics

Resources

License

Stars

Watchers

Forks

Contributors 5