<h2>Overview:</h2>
<p>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.</p>
<h2>Features:</h2>
<ul>
<li><strong>getKeys</strong>: Customize visible keys in any nested data.</li>
<li><strong>expandOnCreatedAndUpdated</strong>: 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.</li>
<li><strong>Recursive expand</strong>: Allow users to recursively expand nodes by holding down the Meta key and clicking.</li>
<li><strong>Recursive collapse</strong>: Allow users to recursively collapse nodes by holding down the Meta key, and Shift clicking.</li>
<li><strong>Light/Dark mode</strong>: The component supports both light and dark modes.</li>
</ul>
<h3>NPM:</h3>
<pre><code>npm install object-visualizer
</code></pre>


<h2>Overview</h2>
<p>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.</p>
<h2>Features</h2>
<ul>
<li><strong>getKeys:</strong> Customize visible keys in nested data.</li>
<li><strong>expandOnCreatedAndUpdated:</strong> 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.</li>
<li><strong>Recursive expand:</strong> Use Meta+Click to recursively expand objects.</li>
<li><strong>Recursive collapse:</strong> Use Meta+Shift+Click to recursively collapse objects.</li>
<li><strong>Light/Dark mode:</strong> Supports both light and dark themes.</li>
</ul>
<h3>NPM</h3>
<pre><code class="language-bash">npm install object-visualizer
</code></pre>
<h3>CDN</h3>
<p>Include the following script tag in your HTML file:</p>
<pre><code class="language-html">&#x3C;script src="https://cdn.jsdelivr.net/npm/object-visualizer">&#x3C;/script>
</code></pre>


Soc221b

Object Visualizer

Object Visualizer