JSON Hero: Enhanced JSON structure visualization
jsonhero.io
jsonhero.io
I can only imagine the kind of personal information or proprietary internal data that has been unwittingly transmitted due to tools like this.
If my objective was to gain the secrets of various worldwide entities, one of the first things I would do is set up seemingly innocent Pastebins, JSON checkers, online file format convertors and permanently retain all submitted data.
*I'm not justifying doing it on the server, especially for an application like this where yes: it can be done in the client.* But I do sympathize because I know from experience why it's easier to do it server-side, without any conspiracies.
I wrote Papa Parse[0] about 10 years ago, and back then at least, it was extremely difficult to stream large files in an efficient, reliable way. Web Workers make things slightly better, but there's so many issues with large-scale local compute in a browser tab.
A few examples:
- https://stackoverflow.com/questions/24708649/why-does-web-wo... (the answer actually came from Google+ which is still linked to, but no longer available; fortunately I summarized it in my post)
- https://stackoverflow.com/questions/27081858/how-can-i-make-...
You get deep enough into the weeds and eventually you realize you can make it work cross-browser if you know which browser you're using (YES, User-Agent does matter for things like this) and call you crazy for trying to find out:
- https://stackoverflow.com/questions/27084036/how-can-i-relia...
Despite all this, I *100%* agree and local-only processing is also a hard-rule for me as well. (That's why JSON-to-Go[1] does it all client-side. `go fmt` event compiles to WASM and runs in the browser!)
This sounds like a strawman. Not everyone wrangles multi-GB files, let alone JSON documents. Those who do are already readily aware of the implications. I mean,some popular text editors even struggle with multi-GB of plain text files.
You don't need a server to handle JSON. There is no excuse.
No technical excuse, but lots of buisness reasons I guess.
"you post publicly the json, which may or may not be ideal depending on what you're doing" - that's never ideal, it's just a smaller problem (if the JSON is publicly available anyway) or a much bigger problem (if it's sensitive personal data).
Personal data is a red herring. It's not the only thing that matters. For starters, using this at work with anything not explicitly public is likely a violation of your contract. In some contexts, it may even be gross misconduct or illegal and potentially exposing your employer to large fines.
And, in general, I'd say a tool like this that comes without explicit, bold warning that it's shipping data off your machine, is just being rude.
I think this is a cool tool for public data and obviously I can’t paste private data sets on any public website, ever.
Plus, they offer a VS Code extension. It's not so obvious that it's just the same public website underneath.
Additionally, developers who understand those concerns kind of expect that other developers also understand them, and thus would not create an on-line tool like this in the first place.
I'd be surprised if anyone at all, specially developers, expects a browser to do anything other than transfer data to/from the internet.
"Personal data" means the reddest of data. If a system collects and tracks personal information then it will be expected to collect highly sensitive information that is not personal. It makes absolutely no sense at all to try to downplay security problems by coming up with excuses such as "oh it's only leaking personal data".
See e.g. this, elsewhere in this thread: https://news.ycombinator.com/item?id=33784919. What does the linked Microsoft page say? Quoting:
> The telemetry feature doesn't collect personal data, such as usernames or email addresses. It doesn't scan your code and doesn't extract project-level data, such as name, repository, or author. The data is sent securely to Microsoft servers using Azure Monitor technology, held under restricted access, and published under strict security controls from secure Azure Storage systems.
I.e. "we're not collecting personal data, so you have nothing to worry about". Plus the classic "the data is sent securely to our servers", as if that was supposed to be reassuring. It's one of the most common types of distraction I see: focusing on how the data in-flight won't leak to third parties, and ignoring the fact that it's the first party that shouldn't be getting this data in the first place.
You claimed that personal data was a red herring. It is not. Shipping personal data is the worst possible scenario. It's unthinkable to try to make the case that a data leak is not serious because it's just personal data.
Which is exactly what makes it the red herring. Shipping personal data is one of the worst possible scenarios (I'd argue that, in corporate context, shipping data that's subject to export controls is worse, as it could easily get you fired, the company fined, and potentially land someone in jail) - which makes it a perfect distraction from all the other data that's being exfiltrated. "We're not collecting personal data" is the equivalent of putting a "doesn't contain asbestos" label on food packaging.
You can also have more data that is red, but if your infosec policies fail to prevent or stop personal information being sent, which is the lowest of low-hanging fruits to spot, then you will assuredly be leaking more red data that is harder to spot.
It makes no sense to try to downplay the problem if leaking personal data. It's the most serious offense in any context, not only for the data but specially for what it says about the security policies in place.
Merriam-Webster: "red herring [noun] (...) 2. [from the practice of drawing a red herring across a trail to confuse hunting dogs] : something that distracts attention from the real issue"
English Wikipedia: "A red herring is something that misleads or distracts from a relevant or important question. It may be either a logical fallacy or a literary device that leads readers or audiences toward a false conclusion. A red herring may be used intentionally, as in mystery fiction or as part of rhetorical strategies (e.g., in politics), or may be used in argumentation inadvertently."
This is exactly the meaning I'm using, so I think I know it just fine. To reiterate once again: leaking personal data isn't the only way telemetry can be problematic - it's not even the major issue in practice, thanks to associated risk of fines and bad PR (GDPR was quite helpful here). Saying that your telemetry is fine because it's not collecting personal data is just a way to distract the reader. It's the equivalent of advertising your heavily processed food product as safe "because it doesn't contain asbestos".
I was totally about to clone this repo and run it locally so I can play with some internal json.
Yes it's a cool looking tool, but there are certslain requirements that ignorance doesn't exempt us from.
My pet gripe is all of the seemingly local (open source) tools that phone home with opt-out metrics, not mentioned in the "getting started" and take some obscure flag to disable and it's just that little bit more complex to do when running the defacto (containerised) build.
Exhibit A: DotNet! https://learn.microsoft.com/en-us/dotnet/core/tools/telemetr...
"...To opt out, set the DOTNET_CLI_TELEMETRY_OPTOUT environment variable before you install the .NET SDK"
For telemetry during actual use, you can set that flag any time, and a message is shown on first use to inform you about it.
So seems relatively reasonable to me.
Wrong. That's for the dotnet cli tool to phone home each and every time you run a command.
https://learn.microsoft.com/en-us/dotnet/core/tools/telemetr...
Microsoft even provides a page which showcases summaries of some of the metrics they collect from you if you don't disable this feature. These metrics even include MAC addresses.
https://dotnet.microsoft.com/en-us/platform/telemetry
> Seems quite reasonable as long as we accept them sending telemetry during install.
There is nothing reasonable about this. You should not be required to have tribal knowledge on how to use arcane tricks prior to running an application just to avoid being spied upon. It's a dark pattern, and one that conveys a motivation to spy upon unsuspecting users whether they approve it or not.
> The .NET SDK telemetry feature is enabled by default. To opt out of the telemetry feature, set the DOTNET_CLI_TELEMETRY_OPTOUT environment variable to 1 or true.
> A single telemetry entry is also sent by the .NET SDK installer when a successful installation happens. To opt out, set the DOTNET_CLI_TELEMETRY_OPTOUT environment variable before you install the .NET SDK.
MAC address SHA256 hashes, to be precise.
If a new starter did this on a company machine, boom, misconduct on their first day; though I hope the network/operations team have already put a block in place for that.
That is an extreme example, but it's kind of annoying you have to look this up, and make sure you didn't typo the flag for every piece of software you use/test.
I'm sticking to our much-better norms for this shit from c. 2000, damnit! It really is crazy how fast and completely that changed.
The context is also important, beta test of a game's entire point is to get that data to improve the product.
Telemetry
---------
The .NET tools collect usage data in order to help us improve your experience. The data is collected by Microsoft and shared with the community. You can opt-out of telemetry by setting the DOTNET_CLI_TELEMETRY_OPTOUT environment variable to '1' or 'true' using your favorite shell.
Read more about .NET CLI Tools telemetry: https://aka.ms/dotnet-cli-telemetry
HN crowd associate telemetry with privacy or cancer and the T word gives shrugs... but it is not always the case.
> Protecting your privacy is important to us. If you suspect the telemetry is collecting sensitive data or the data is being insecurely or inappropriately handled, file an issue in the dotnet/sdk repository or send an email to dotnet@microsoft.com for investigation.
Here I don't agree. It should be certainly be visible, so you can make an informed decision whether or not to use it. But it's a sad fact of human nature how little we are willing to contribute back even when people give us something for free, even if just a click away (not to mention paying a small amount, filling a bug report...)
I host in in my kube cluster with all outbound connections blocked, just to be safe.
And they operated for years, when someone noticed links on their own website, they haven't added themselves and tried to figure out, how it happened, because nobody else had access to the website.
(Will update with a link, if I find it.)
My tool flatterer: https://lite.flatterer.dev/ converts deeply nested JSON to csv/xlsx, is done in web assembly in the browser.
It hard to prove that it is not sending data to a server, so it can be trusted. I know people could check dev tools but that is error prone and some users may not be able to do it.
I wish there was an easy way to prove this to users as it would make online tools like this much more attractive.
Don't know how reliable this is though or whether a web developer could work around this.
Unless you were also using incognito or throwaway tab containers to discard stored data.
If you have a tech savvy audience they can also view your thing in an iframe with only sandbox="allow-scripts" to prove that it's not making network requests.
I wrote an html/js log viewer with those security models https://GitHub.com/ljw1004/seaoflogs - it handles up to 10kline log files decently, all locally.
For me, this is harder to use than reading the JSON in a colour text editor such as VSCode. I'm getting less information on the page, and its harder to scan, but that might be because I'm used to reading JSON.
And yes I feel the same. For me its also easier to read it either on raw form or in VsCode.
This project takes a different approach, in that it handles the displaying of JSON node leaf data in a more human way. E.g for hex colours showing a colour picker or a date picker for dates.
What sets this tool apart however is the static analysis of the JSON data, which in doing so can uncover divergences or outliers in the data. E.g a single null value somewhere, or supposedly data which deviates from the majority data-type (i.e a number where every other value is a string).
I think there's value proposition in just edge case detection. Datasets can be massive, with something like JSON there exists no formal type verification. Although to be honest, I don't see a valid reason to use JSON as a backend given graph based databases with type-safe schemas exist.
Many other CAD formats also switched to JSON.
And, well, as much as I applaud the effort, I also think that I'll stick to my text editor for browsing JSON data and to jq for extracting data from it.
My text editor because it's easy to perfom free text search and to fold sections, and that's all that I need to get an overview.
Jq because it's such a brilliantly sharp knife for carving out the exact data that out want. Say I had to iterate a JSON array of company departments, each with a nested array of employees, and collect everyone's email. A navigational tool doesn't help a whole lot but it's a jq one liner. Jq scales to large data structures in a way that no navigational tool would ever do.
Also, there is the security issue of pasting potentially sensitive data into a website.
Looks a bit like fzf combined with jq.
Uh... It does? I remember when XML was the main data interchange format of the web. That sucked. JSON is amazing, terrific, wonderful, etc. in comparison.
It's not that we had XML and SGML and XDR because nobody had invented something as simple as JSON, yet. The real reasons are some complicated social hodgepodge that made those complicated beasts more accepted than the already-invented simpler approaches.
My guess is that XML is good for situations where text and data is mixed.
Meanwhile the only issue I have with JSON is the lack of support for trailing commas.
I don't agree. My take is that HTML/XML-like syntaxes benefit from familiarity from front-end developers, and a DSL to express document/component trees ends up simplifying the job of expressing document/component trees.
It's my understanding that JSON was not invented. It's just the necessary and sufficient parts of JavaScript to define data structures, and could be parsed/imported in a browser with a call to eval().
People who complain about JSON completely miss the whole point. It's not that it's great or trouble-free, it's that it solved the need to exchange data with a browser without requiring any library or framework.
Douglas Crockford took his time to write up a specification for the JavaScript Object Notation (JSON).
That specification is, quite literally, "based on a subset of the JavaScript Programming Language Standard ECMA-262 3rd Edition - December 1999."
It's in the name. There is no way around this.
MDN's doc on JavaScript's eval() vs JSON.parse() refer to JSON as "a subset of JavaScript syntax to represent data."
Claiming that someone discovered JSON makes as much sense as reading the C standard section on struct initialization and proceed to claim you discovered the C struct notation (CSN).
https://en.cppreference.com/w/c/language/struct_initializati...
I can read a 10 like file without a parser. What I don't like is 7 layers deep, nested, 890 lines long.
I wonder why - apart from the "Should this be an element or an attribute?" issues and oddities in various implementations, XML doesn't seem like the worst thing ever.
Actually, in a web development context, I'd argue that WSDL that was used with SOAP was superior to how most people worked with REST (and how some do), since it's taken OpenAPI years to catch up and codegen is still not quite as widespread, despite notable progress: https://openapi-generator.tech/
What does leave a sour taste, however, is the fact that configuration turned into XML hell (not in a web context, but for apps locally) much like we have YAML hell nowadays, as well as people being able to focus on codegen absolved them of the need to pay lots of attention towards how intuitive their data structures are.
That said, JSON also seems okay and it being simpler is a good thing. Though personally JSON5 feels like it addresses a few things that some might find missing: https://json5.org/ (despite it being a non-starter for many, due to limited popularity/support)
The trade-off of "that simple" is now every JSON tool has to reinvent XML-RPC, XPath, XML Schema, etc. In that way, JSON may be following the path of every other JS thing: arg, this framework is too heavy, I'm going to write a lighter one! ... ok, just with this one other feature .. ok, and this one ... arg, this framework is too heavy!
Oh, you're writing a service? You can't just XPath your way to that <Customer>, because it's a namespaced <Customer>, your XML parser will claim there's no <Customer> in the message, you have to register your namespaces "http://example.com/api/customers/v2" and "http://www.w3.org/2003/05/soap-envelope" and look for /soap:Envelope/soap:Body/c:Customer instead.
JSON is annoyingly anal about its commas, but at least it has a single global namespace and I have never encountered a situation where I wished I could disambiguate between two different "customer" objects in my JSON payload.
* Elements and attributes (as you said).
* Text children mixed up with elements. These two are both good for writing documents by hand (i.e. HTML) but really annoying to process.
* Namespaces are frankly confusing. I understand them now but I didn't for years - why is the namespace a URL but there's nothing actually at that URL? 99% of the time you don't even need namespaces.
* The tooling around XML is pretty good but it's all very over-engineered just like XML.
* The syntax is overly complicated and verbose. Repeated tag names everywhere. Several different kinds of quoting.
* XML schema is nice but it would be good if there was at least some support for basic types in the document. The lack of bool attributes is annoying, and there's no standard way to create a map.
JSON is better by almost every metric. It is missing namespaces but I can't think of a single time I've needed that in JSON. Mixing up elements from different schemas in the same place is arguably a terrible idea anyway.
The only bad things about JSON are the lack of comments and trailing commas (which are both fixed by JSON5) and its general inefficiency.
The inefficiency can be sometimes solved by using a binary JSON style format e.g. CBOR or Protobuf. With very large documents I've found it better to use SQLite.
https://altearius.github.io/tools/json/index.html
Was formerly hosted at http://chris.photobooks.com/json
I guess I could fork it myself, but don't particularly want to have to run a web app to browser JSON either.
I wonder how easy it would be to port to Electron.
https://marketplace.visualstudio.com/items?itemName=JSONHero...
Porting to Electron would be trivial but in doing so you incur the following ramifications:
- the user has yet another instance of Chromium running on their device.
- they can't interact with browser based UIs easily any longer (bookmarking, retaining in history, copying the URL, different cookie/login jars, etc...).
- might fragment the users workflow even more if they have to interleave between electron apps and their browser
- lack of user extensions and some important accessibility features
In Chrome you can create a shortcut for the page and select "open in a new window" which by-in-large emulates the workflow you request. I'm sure there's a similar process for Firefox.
Who wants a tool they rely on to one day update with spyware, HTTP 404, or filled with ads (like Toptal did with keycode.info)?
edit: clarify & format
For other browsers (incl Edge) Fluid does the same for me (http://fluidapp.com (not affiliated))
After opening a few emails: Outlook MacOs app: 922 MB Outlook PWA via Fluid: 42 MB
It generates TS type file from a raw JSON file. Has totally saved my sanity at least once.
Generally I just open in VS Code, reformat and use search etc.
Still way more readable than XML.
> Still way more readable than XML.
TypeError: Cannot read properties of null (reading 'getItem')
at u (https://jsonhero.io/build/_shared/chunk-LYGVB3WT.js:1:161)
at https://jsonhero.io/build/_shared/chunk-LYGVB3WT.js:1:407
at Gf (https://jsonhero.io/build/_shared/chunk-PZ2Z7HGX.js:9:6560)
at L.unstable_runWithPriority (https://jsonhero.io/build/_shared/chunk-PZ2Z7HGX.js:1:4026)
at rn (https://jsonhero.io/build/_shared/chunk-PZ2Z7HGX.js:5:38448)
at Xe (https://jsonhero.io/build/_shared/chunk-PZ2Z7HGX.js:9:6029)
at yi (https://jsonhero.io/build/_shared/chunk-PZ2Z7HGX.js:7:10750)
at https://jsonhero.io/build/_shared/chunk-PZ2Z7HGX.js:5:38670
at L.unstable_runWithPriority (https://jsonhero.io/build/_shared/chunk-PZ2Z7HGX.js:1:4026)
at rn (https://jsonhero.io/build/_shared/chunk-PZ2Z7HGX.js:5:38448)
It truly amazes me that anyone in their right mind would even consider writing the code that does this. This isn't something that "just happens" - someone intentionally wrote code to replace the whole page with an error message (probably a developer of some JS framework this site uses) and that's simply not acceptable. Even if this is a debug build (it obviously shouldn't be, but who knows), this behavior is insane.
I'm not saying it's bad, I'm saying it didn't won on technical merits.
I do dislike people using them for configs tho, even indented the readability is just "okay", the ease of change is worse than YAML (even with all it's problem), especially forcing no trailing `,` is just plainly obnoxious.
It wastes my time and tends, in practice, to cause bugs, all for no good reason.
I'd say "sucks" is accurate. Not that it's the only bad format we've come up with lately (YAML, ugh).
I don't know of any language that supports YAML without a 3rd party library.
Is it merely about the ecosystem? I'm curious if something about the language isn't meeting people's needs.
The YAML spec is thousands of lines long (23k words, to be more exact). This is even longer than XML (20k words). JSON's spec is less than two thousand words. For a language that's supposed to be human-readable, YAML is maddeningly complex.
Plus, of course, you can execute arbitrary code with it. By design. AND it contains semantic whitespace, which is personally my least favourite innovation ever.
I like the comments and trailing commas too. It has a few other small improvements as well.
It's actually good enough to even write configs in it. I do hope it will get enough traction to be standard...
https://www.json-buddy.com/ but it's Windows only and has what I call a "millions of tiny buttons" UI.
JSON schema is awesome but it's really tedious to write by hand, even if the basic is auto-generated. It can also get really complex and thumbs up or down doesn't cut it for developer experience.
I want something where I can debug/step through the validation.
I use it in a variety of languages: JS/TS, PHP, Java.
I built a json schema editor gui saas, and my conclusion is no one is buying because they use lang libs to generate it. So I kinda surprise you said you wanted an editor.
How I do this now, is to get an example response, auto-generate the schema using a tool like this https://extendsclass.com/json-schema-validator.html and then hand-tune from there. In some cases the same endpoint response can have huge variations depending on the request so it's very tedious doing this by hand.
A variation on the tool above that would help a lot would be if I could provide multiple example JSONs and it could return a schema that validates all of them.
JSON schema is used in MySQL now natively, it's used in PHP, and from what I can tell a lot of other languages. The package you linked to assumes you're generating it from JS/TS. As JSON becomes even more popular as a data interchange format I think that assumption will be less true.
This is just a complete guess, but maybe your tool wasn't getting traction just because it's so early in the life of JSON Schema. There's not even a final stable version 1 yet.
Trust me on JSON Schema spec, it's been in draft for a decade, to the point they stop calling it "draft" and put date on it instead. It's a frustrating specification (I read the whole thing dozen of time because I wanted it to fully compatible .. but decided to only adopt nice subset of it)
Your use case is very niche though.
Yes exactly.
> it's been in draft for a decade
https://json-schema.org/blog/posts/future-of-json-schema#sta... https://github.com/json-schema-org/community/discussions/69
I can see they're working on this issue. Hopefully they get it resolved sooner rather than later.
Does it though? I'm not a huge fan of tools who bash the thing they're trying to help people work with. Maybe "JSON is hard" is a better tag line?
By "dumb", I mean it's simple - almost as simple as it gets. I don't like YAML - it's more complicated than JSON in all the bad ways[0]. By "annoying" I mean the experience of using it in languages other than JavaScript, especially in statically-typed ones. I guess it's true for all such data formats - XML, YAML and s-exps are also going to create the same kind of type-related pain. By "overused" I mean, it's used too often in places where it shouldn't be[1], adding to software inefficiency and bloat at every layer.
But my point is, none of that is actually hard. It's just stupid, annoying drudgework.
----
[0] - Optimizing too much for looking "nice" to humans, by means of removing affordances that make the precise structure obvious. It's particularly apparent when you try to write some, and the document grows beyond screenful of lines in length, and 2-3 levels in depth.
[1] - There are many, many examples of JSON being used where a more streamlined text format, or a binary format, would be a better fit. One that comes to my mind and annoys me to no end, is when people encode large amounts of time series data in JSON, in a format like [{"x" : "123", "y" : "456"}, ...]. The data set becomes easily 10x the size it should be, 20-30x if it's not minified. Sure computers are fast and all, but I've long suspected - and recently seen some articles confirming - that at this point, software is often no longer IO-bound, but CPU-bound, and mostly on parsers.
I applaud this effort. I hate that we’re back to where this feels necessary. I’m not sure if there’s anything better.
JSON sure felt better than XML. But did we abstract too far, or did we just get so much better bandwidth and processors, that enriched data exploration is just insignificantly possible?
I read the use-cases for this, but I feel like: if you’ve gone so far to where this is helpful/useful, have you just gone too far?
I don't understand this perspective. JSON isn't used only for RPC, even if that's what most frontend software is doing. For better or worse, it became a data serialization and interchange format - the need for such support tools arises naturally once you're generating or processing anything but most trivial data, and you value your time/sanity.
It's been a while since I used it last, but it was a life saver for me when working with JSON lines files in S3 and Kafka log dumps.
A side tidbit, IIRC, it was written in Pascal.
Nice tool, but like others have said, I'm pretty comfortable reading JSON in my editor.
I don't understand this sentiment at all. Not even sure why we need this tool. Feels like a solution looking for a problem to me.
Personally, the built-in JSON parsing/formatting in VS Code (or any other editor) is plenty for me, and for API results Firefox will automatically format / collapse it.
Eg... open this link in Firefox: https://www.reddit.com/r/funny.json
I guess I can just add an object
(nice demo, thanks for sharing)
Why would you make something better at sucking? Just gron the damn thing and grep through it like a normal person.
That’s unfortunate!
I like that the landing page provides clear examples, but still, I’d prefer a full featured live demo.
Firefox even ships with a JSON viewer enabled by default.
It really doesn't though.
More annoying to write than YAML/TOML, no trailing comma. Yes I'd rank it lower than YAML even with its whitespace annoyances, good editor handle that, JSON is still annoying.
Not super compact (althought it's not too bad when compressed).
No proper numeric types, just one "sorta int, sorta float, depends on parser, say farewell to NaNs and infinities", you can't even losslessly transfer a normal IEEE flaot across it.
The schema thing came late so rarely used or supported.
So it really is pretty mediocre all things considered.
Definitely "good enough" but could also be improved.