A vue component to visualize the JSON object to the DOM.
As same as Chrome's object tree As same as Chrome's object tree
-
getKeys: customize visible keys in any nested data -
expandOnCreatedAndUpdated: expand or collapse after created or updatedStarting from v4.0.0, this feature is only available for objects due to performance issues.
- Recursive expand
Meta+Click - Recursive collapse
Meta+Shift+Click
- Recursive expand
-
Light/Dark mode
$ npm install object-visualizer
import { ObjectVisualizer } from 'object-visualizer' import 'object-visualizer/dist/index.min.css'
<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>
<ObjectVisualizer :data="['foo', 'bar']" rootName="Data" :expandOnCreatedAndUpdated="(path) => false" :getKeys="(object, path) => Object.keys(object)" ></ObjectVisualizer>
Distributed under the MIT license. See LICENSE for more information.