Object Visualizer
Vue JSON inspector with Chrome-like theme.
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.
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.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.