Object Visualizer

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

Live Demo

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

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

https://github.com/iendeavor

License

soc221b/object-visualizer

ErrorLooks like something went wrong!

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Contributors 5

Uh oh!

Languages

Error
Looks like something went wrong!