HN Explorer

99 comments

[ 2.8 ms ] story [ 161 ms ] thread
ejb999
As someone that works with complex json objects on an almost daily basis, this looks like it will become part of my daily toolkit - nice job.
auggierose
Having an extra box for nested fields is somewhat annoying and space wasting, I think. Can that be switched on/off? From a drawing perspective it is easier, but it seems it should be possible to do away with the extra box.
loxias
That was my first thought as well.
mahesh_rm
Where has this been for all this time.
helsinkiandrew
I thought this was a new feature in Microsoft Visio initially. Would “JSON Visio” be a breach of their trademark?

https://trademarks.justia.com/742/75/visio-74275413.html

lelandfe
Only matters if Microsoft sues. GitHub-owner era Microsoft tends to want to stay in the open source community’s good graces. (Plus I’m sure the owner would just change the name if MS asked, anyway)

That being said, this is also a diagramming tool… I probably would recommend changing it

sbuttgereit
They'd probably (or I hope they would) ask nicely first, cease-and-desist second, and sue as a last resort.

Whether or not Microsoft allows the use may not be fully at their discretion; or rather their earlier choices could tie their hands in regards to later choices if things go south.

This is a short read on the kinds of issues that start to crop up when you don't agressively enforce your trademarks:

https://www.forbes.com/sites/oliverherzfeld/2013/02/28/failu...

dang
(We've since changed the title and URL by the submitter's request.)
KevinEldon
Cool. PlantUML also does JSON visualization [1] if you need a local option or are hesitant to load your data onto a website.

[1] https://plantuml.com/json

blooalien
Nice! Thank you for that. Did not know that.
Manfred
Looks good. Unfortunately most JSON (I personally handle) contains private information and I would never paste it into a web page.
proboy
Cool tool, thanks for sharing. Would be great to have a version as a VS Code extension, imagine using it directly inside VS Code <3
yieldcrv
Note: when browsing on mobile it isn't obvious that there are examples, the tweet from github isnt obvious that it is an example and the interactive graph doesnt look like one because it zooms into blank space

although I have a desktop and do development there, my interest in a new tool is frequently is sparked by my casual browsing on mobile, there might be (many) others like me

wruza
Yep, my first thought was “but where are examples” and I couldn’t find any.
clementmas
I scrolled down on mobile and closed the website because I couldn't see any example
defrost
Looks good.

Slight quibble, JSON with large value fields (eg: 4K text as a single line) blow out the containing box dimensions in the web visualiser.

Maybe there's a flag to clip | wrap such values, if so I missed ny option to toggle it.

( I used MediaInfoCLI --output=JSON on some multitrack files from handbrake, the encode argument flags are a single large value )

defrost
ADDENDUM:

There's a -><- Collapse nodes | Expand Nodes toggle on the RHS vertical toolbar of the web visual editor.

Still appears to be a slight issue with very large nodes (because of very long lines as values) scaling out of the view and being tricky to navigate into view again.

Still a handy tool for certain JSON structures for that first overview.

m00dy
This will be the first project that I will be sponsoring...
bilekas
Personally I've never had a problem reading through json, I mean its designed that way to be flat and simple, but this could be brilliant for documentation, even auto updating with some schema changes etc.

Super useful for me in that way so thanks!

cerved
if it contains very large, nested objects, it can be harder to get an overview or navigate
loxias
This looks like a neat tool, but without the ability to collapse and expand most sections, it's only useful for trivially small JSON files :/
Frajedo
Definitely the nº1 missing feature. Hope it arrives soon :)
[deleted]
(comment deleted)
youngNed
this might be a good place to ask: is there any tool out there that can help with json to normalised tables?

I know that many databases can store json, but i often have api's that i would like storing in tables, and feel that 'splitting it out' should be fairly trivial.

Each time i think about making a tool, i am put off by the fact that there is a voice saying 'someone will have done this, in a much better way than you!' :-)

EDIT:

Ignore that, i did that think where i didn't look at the link - this pretty much does what i would need

awild
Have you looked at Millercsv or jq?
raxxorraxor
If you have an MS office suite the power query editor can expand JSON to columns. Doesn't result in a table that is normalized per se, but it is quite a powerful tool overall. Not really a Microsoft fan, but what they provide here is not bad at all.
brailsafe
This looks like it might he useful for migrating pre-typescript code to Typescript. Identifying permutations of otherwise similar objects can be a pain, and sometimes similar APIs will return fields that have the same property name but only contain a small subset of data.
[deleted]
(comment deleted)
mkl95
It looks like the natural evolution of tools like jsonviewer.stack.hu
metecan
Excellent tool for developers, I use it all the time
afandian
There’s a message saying “incompatible device”. I’m using an iPhone.
exabyte
Same but with Android, makes sense this would be more of a desktop experience though
pvorb
A hint on which kind of device is considered compatible would've been nice. I didn't expect this to be desktop-only.
kurishutofu
The button leads to the editor page which you can acces from the main navigation, it’s weird that the button is disabled on mobile while the editor works fine.
anonu
I've been looking for something visual like this that can generate JSON Schemas. You would be able to visit any "node", right-click, and specify the constraints you're looking to add to the schema...
geokon
If you indent your code manually then you can achieve something that I feel looks quite similar. So the example they give would be written as:

    {"squadName":  "Super hero squad",
     "homeTown":   "Metro City",
     "formed":     2016,
     "secretBase": "Super tower",
     "active":     true,
     "members":    [{"name":           "Molecule Man",
                     "age":            29,
                     "secretIdentity": "Dan Jukes",
                     "powers":         ["Radiation resistance",
                                        "Turning tiny",
                                        "Radiation blast"]},
                    {"name":           "Madame Uppercut",
                     "age":            39,
                     "secretIdentity": "Jane Wilson",
                     "powers":         ["Million tonne punch",
                                        "Damage resistance",
                                        "Superhuman reflexes"]},
                    {"name":           "Eternal Flame",
                     "age":            1000000,
                     "secretIdentity": "Unknown",
                     "powers":         ["Immortality",
                                        "Heat Immunity",
                                        "Inferno",
                                        "Teleportation",
                                        "Interdimensional travel"]}]}
I've been doing with Clojure/EDN data and I feel it makes it much easier to visually parse.

PS: Does anyone knows if there was an emacs mode that'd do this for me automagically?

bboozzoo
Have you tried json-mode? Seems to work pretty well.
geokon
The point was that the keys and values are all aligned to the same minimal column numbers :) Both `json-mode` `json-reformat` don't seem to do that (and ideally I'd like something that'd work with Clojure/EDN code..)
user5678
gg=G in evil mode will do that.
dotancohen
Evil (Emacs 27.1) produced this:

  {
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
          {
          "name": "Molecule Man",
          "age": 29,
          "secretIdentity": "Dan Jukes",
          "powers": [
                 "Radiation resistance",
                 "Turning tiny",
                 "Radiation blast"
                 ]
          },
          {
          "name": "Madame Uppercut",
          "age": 39,
          "secretIdentity": "Jane Wilson",
          "powers": [
                 "Million tonne punch",
                 "Damage resistance",
                 "Superhuman reflexes"
                 ]
          },
          {
          "name": "Eternal Flame",
          "age": 1000000,
          "secretIdentity": "Unknown",
          "powers": [
                 "Immortality",
                 "Heat Immunity",
                 "Inferno",
                 "Teleportation",
                 "Interdimensional travel"
                 ]
              }
          ]
  }
Interestingly, the first-level items are not indented. Real VIM 8.1 produced the same format, but the first-level items _are_ indented.
coenhyde
If you climb to the top of a really tall mountain you'll get a similar perspective to what Google Maps provides.
solardev
Ads?
btown
We prefer to call them contextually preferred mountaintop suggestions. To suggest otherwise would be to suggest that our entire industry is built on nothing more than peak comedy.
samstave
Peak comedy is a slippery slope. Just be careful to not trigger an avalanche of puns, because that can snowball into something unstoppable, then everything goes downhill fast!
helmholtz
High-brow humour is not HN's strong suit it would appear :)
abrax3141
That’s not really fair. At the moment we communicate and read json in text, so formatting the text to be human-readable and reasonably arranged often (although not always) matters.
ozim
I actually laughed.

Though - one does not have to do that stuff manually I can imagine some json linter could be configured to do such layout, or someone can just write tool to do that. So idea for this indentation is not bad IMHO.

nerdponx
This is how Lisp code (and S-expressions in general) is conventionally indented.
dotancohen
Python formats it almost exactly like you did:

  $ python3 -m json.tool
  {
    "squadName": "Super hero squad",
    "homeTown": "Metro City",
    "formed": 2016,
    "secretBase": "Super tower",
    "active": true,
    "members": [
        {
            "name": "Molecule Man",
            "age": 29,
            "secretIdentity": "Dan Jukes",
            "powers": [
                "Radiation resistance",
                "Turning tiny",
                "Radiation blast"
            ]
        },
        {
            "name": "Madame Uppercut",
            "age": 39,
            "secretIdentity": "Jane Wilson",
            "powers": [
                "Million tonne punch",
                "Damage resistance",
                "Superhuman reflexes"
            ]
        },
        {
            "name": "Eternal Flame",
            "age": 1000000,
            "secretIdentity": "Unknown",
            "powers": [
                "Immortality",
                "Heat Immunity",
                "Inferno",
                "Teleportation",
                "Interdimensional travel"
            ]
        }
    ]
  }
geokon
I don't python, but this scheme missed the point. Keys are vertically aligned, but values are not. Some brackets are vertically aligned, other are not (you have to hunt for the starting square brackets). Bracket take up a whole line each wasting vertical space.
dotancohen
I see, thanks. For me, the point is just "indent successive objects" so it suffices - especially when I'm in a Python mindset and mentally filtering out brackets anyway. But I could understand why you prefer the formatting as you do.
geokon
I think having the values aligned make it much quicker to read off entries. I will generally looked at the keys for the first entry, but for subsequent entries I assume the same ordering and just look at the values on the right.

It's a bit trivial, but another subtle effect that I like is that the sub-blocks are not mutually vertically aligned due to being offset by the semi-random length of the key

So for instance

    {"squadName":  "Super hero squad",
     "homeTown":   "Metro City",
     "formed":     2016,
     "secretBase": "Super tower",
     "active":     true,
     "members":    [{"name":           "Molecule Man",
                     "age":            29,
                     "secretIdentity": "Dan Jukes",
                     "powers":         ["Radiation resistance",
                                        "Turning tiny",
                                        "Radiation blast"]},
                    {"name":           "Madame Uppercut",
                     "age":            39,
                     "secretIdentity": "Jane Wilson",
                     "powers":         ["Million tonne punch",
                                        "Damage resistance",
                                        "Superhuman reflexes"]}],
    "enemies": [{"name":           "Eternal Flame",
                 "age":            1000000,
                 "secretIdentity": "Unknown",
                 "powers":         ["Immortality",
                                    "Heat Immunity",
                                    "Inferno",
                                    "Teleportation",
                                    "Interdimensional travel"]}]}
at a glance you see that the third person is not part of the same list as the first two

If all second level blocks are at the same level then you need to visually catch that there is extra key.

Kalanos
why is it its own app? is it available a vscode/jupyter plugin?
hiccuphippo
Once I was working with an api that used mongodb in the back. Mongo uses very large integers as ids and I was looking at the json generated through a json viewer extension in the browser. I was having problems because I couldn't find the document I was looking at in the database. Turns out, the viewer used the browser's JSON.parse and that was converting the id to a number and losing precision since it was so large. Ever since, I prefer to look at json raw first and then use formatters just to look at the shape, not the data.