Overview:

Object Visualizer is a Vue component that allows users to visualize JSON objects in the DOM. It provides a similar experience to Chrome’s object tree, making it easy to explore and understand complex data structures.

Features:

• getKeys: Customize visible keys in any nested data.
• expandOnCreatedAndUpdated: Expand or collapse nodes automatically after being created or updated. Please note that starting from version 4.0.0, this feature is only available for objects due to performance issues.
• Recursive expand: Allow users to recursively expand nodes by holding down the Meta key and clicking.
• Recursive collapse: Allow users to recursively collapse nodes by holding down the Meta key, and Shift clicking.
• Light/Dark mode: The component supports both light and dark modes.

Installation:

To install Object Visualizer, you can use either NPM or CDN.

NPM:

npm install object-visualizer

CDN:

Add the following script tag to your HTML file:

<script src="https://cdn.example.com/object-visualizer.min.js"></script>

Summary:

Overall, Object Visualizer is a powerful Vue component that simplifies the visualization of JSON objects. It offers useful features such as customizable visible keys, automatic node expansion based on creation or update, and support for recursive expansion and collapse. The component can be easily installed using NPM or CDN, making it accessible for developers using different workflows. Object Visualizer is distributed under the MIT license, providing users with the flexibility to use and modify the component as needed.