Object Visualizer

Overview

The Object Visualizer is a vue component designed to visually represent JSON objects in the DOM. A demo showcasing the component’s capability is available. It provides a similar experience to Chrome’s object tree visualization.

Features

• getKeys: Customize visible keys in nested data.
• expandOnCreatedAndUpdated: Automatically expand or collapse objects after being created or updated. Note: From v4.0.0 onwards, this feature is only available for objects due to performance concerns.
• Recursive expand: Use Meta+Click to recursively expand objects.
• Recursive collapse: Use Meta+Shift+Click to recursively collapse objects.
• Light/Dark mode: Supports both light and dark themes.

Installation

NPM

npm install object-visualizer

CDN

Include the following script tag in your HTML file:

<script src="https://cdn.jsdelivr.net/npm/object-visualizer"></script>

Summary

The Object Visualizer vue component offers a user-friendly way to visualize JSON objects on the DOM. With features like customizing keys, automatic expansion/collapse, and support for both light and dark themes, it enhances the debugging and inspection experience. Users can integrate this component with ease through NPM or CDN for seamless implementation.