Show HN: Object-visualizer – Chrome-console-like JSON object visualizer in DOM

This is a great use-case for a vanilla web component, which would work in any framework, rather than needing react-inspector, svelte-inspect, object-visualizer (Vue), etc.

There's a 0 dependency web component implementation of this here: https://github.com/vanillawc/wc-json Could probably use a bit of polish and some screenshots to show it off. though.

Nice! I made something very much like this last year using Svelte[1], which was a nice choice because of the automatic reactivity it provides.

1: https://github.com/trbrc/svelte-inspect

Fun fact: The Chromium dev tools are "just another web app": https://github.com/ChromeDevTools/devtools-frontend

This looks a lot like Chrome’s console viewer for json (and all other javascript objects).

Is the enhancement just making it easier to cut paste a json than having to craft a page and dump to console?

"Meta + Click to Expand Recursively" -- what is Meta?

This is great, I've wrapped react-inspector in the past into a webcomponent for this, but shipping React and ReactDOM just for this functionality always felt a bit wrong, although from what I understand this requires Vue instead?

I am still hoping for someone to wrap the chromium dev tools in an easy to use webcomponent

This looks great. Something I can’t tell from the demo: does it replicate Chrome devtools’ solution for avoiding performance issues when rendering huge collections? Chrome divides very long objects/arrays into subgroups of 100(?) items that you can expand individually.

This is nice! I was looking for something like this for a custom debug panel a few months ago, but the only one I found was a bit dated and had a jquery dependency.

I’ll have to give this a look.

There is also react-inspector npm package.