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

https://github.com/iendeavor/object-visualizer

by iendeavor • 6 years ago

45 13 6 years ago

charrondev• 6 years ago

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.

prepend• 6 years ago

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?

tobr• 6 years ago

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

psadri• 6 years ago

There is also react-inspector npm package.

spankalee• 6 years ago

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.

wiradikusuma• 6 years ago

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

esprehn• 6 years ago

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://www.google.com/search?q=meta+key

kanobo• 6 years ago

It's used as a generic term in keyboard events to refer to ⌘ on Mac and CTRL on PC, it's rare to see that word used outside of code though.

DonHopkins• 6 years ago

[Insert Deep Meta Discussion Here]

felixrieseberg• 6 years ago

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

ReD_CoDE• 6 years ago

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

playpause• 6 years ago

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.

protoduction• 6 years ago

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

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

Related Stories