4 ms·

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

45 points by iendeavor 6y ago

charrondev 6y 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 6y 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 6y 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 https://github.com/trbrc/svelte-inspect
psadri 6y ago
There is also react-inspector npm package.
spankalee 6y 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 https://github.com/vanillawc/wc-json Could probably use a bit of polish and some screenshots to show it off. though.
wiradikusuma 6y ago
"Meta + Click to Expand Recursively" -- what is Meta?
- esprehn 6y 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/KeyboardEvent/metaKey https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEve... https://www.google.com/search?q=meta+key https://www.google.com/search?q=meta+key
- kanobo 6y 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 6y ago
  [Insert Deep Meta Discussion Here]
felixrieseberg 6y ago
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 6y ago
  Does it completely open source? Can we use it as a platform? a solution that uses its backend and frontend?
playpause 6y 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 6y 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

45 points by iendeavor 6y 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 6y 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 6y 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 https://github.com/trbrc/svelte-inspect

psadri 6y ago

There is also react-inspector npm package.

spankalee 6y 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 https://github.com/vanillawc/wc-json Could probably use a bit of polish and some screenshots to show it off. though.

wiradikusuma 6y ago

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

esprehn 6y 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/KeyboardEvent/metaKey https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEve... https://www.google.com/search?q=meta+key https://www.google.com/search?q=meta+key
kanobo 6y 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 6y ago
[Insert Deep Meta Discussion Here]

felixrieseberg 6y ago

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 6y ago
Does it completely open source? Can we use it as a platform? a solution that uses its backend and frontend?

playpause 6y 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 6y 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