https://github.com/iendeavor/object-visualizer

Vue JSON inspector with Chrome-like theme.
https://github.com/iendeavor/object-visualizer

inspector json tree-view visualizer vue

Last synced: 1 day ago
JSON representation

Vue JSON inspector with Chrome-like theme.

• Host: GitHub
• URL: https://github.com/iendeavor/object-visualizer
• Owner: soc221b
• License: mit
• Created: 2020-07-12T14:46:53.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-16T00:09:59.000Z (29 days ago)
• Last Synced: 2024-10-17T11:27:52.214Z (28 days ago)
• Topics: inspector, json, tree-view, visualizer, vue
• Language: Vue
• Homepage: https://codesandbox.io/s/object-visualizer-5bji4
• Size: 6.59 MB
• Stars: 220
• Watchers: 3
• Forks: 11
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Object Visualizer

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

## Live Demo

[![As same as Chrome's object tree](./dark.png)](https://codesandbox.io/s/object-visualizer-5bji4)

[![As same as Chrome's object tree](./light.png)](https://codesandbox.io/s/object-visualizer-5bji4)

## 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

```

```ts

import { ObjectVisualizer } from 'object-visualizer'

import 'object-visualizer/dist/index.min.css'

```

### CDN

```html

  const { ObjectVisualizer } = window.ObjectVisualizer

```

## Usage

```vue

```

## About



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

https://github.com/iendeavor