
Show HN: Object-visualizer – Chrome-console-like JSON object visualizer in DOM - iendeavor
https://github.com/iendeavor/object-visualizer
======
spankalee
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](https://github.com/vanillawc/wc-json)
Could probably use a bit of polish and some screenshots to show it off.
though.

------
tobr
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](https://github.com/trbrc/svelte-
inspect)

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

~~~
ReD_CoDE
Does it completely open source? Can we use it as a platform? a solution that
uses its backend and frontend?

------
prepend
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?

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

~~~
esprehn
It's a key on your keyboard. The Modifier + Click combo action to recursive
expand is a feature from Mac OS that they've replicated here. Though I think
Mac OS uses Option + Click not Meta.

[https://developer.mozilla.org/en-
US/docs/Web/API/KeyboardEve...](https://developer.mozilla.org/en-
US/docs/Web/API/KeyboardEvent/metaKey)

[https://www.google.com/search?q=meta+key](https://www.google.com/search?q=meta+key)

------
protoduction
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

------
playpause
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.

------
charrondev
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.

------
psadri
There is also react-inspector npm package.

