HN Explorer

Show HN: JSON For You – Visualize JSON in graph or table views (github.com)

211 points by loggerhead ↗ HN
After two years of improvement, I think it's time to share it with you all. Here’s a quick overview:

- Common features include validation, formatting, minification, and more.

- Visualize JSON in a graph or table view.

- Structured comparison with fallback to text comparison.

- Navigate though JSON using JSON pointer.

- Supports jq.

Would love to hear the community's questions, thoughts and comments!

87 comments

[ 2.8 ms ] story [ 181 ms ] thread
netcraft
I love json tools, I use several like https://jsoneditoronline.org/ Any chance of a hosted version?
mrits
there is a link to one at the top under 'Get Started'

I figured it was a link to documentation though

loggerhead
Not really, it’s the home page of the online editor. Was it my use of "Get Started" that confused you? I might have used it inappropriately, I'm not sure.
vvern
What I’m hungry for is not so much this coherent application for exploring json data but rather a set of React components to integrate explorations like this into a web app.

Does anybody know of any good components or libraries for that?

loggerhead
What about an embedded version of the website? I have seriously considered the need for an embedded version, and I plan to support it with high priority. But I'm not sure how much people actually need it.
jy14898
Already uses React, so might be able to rip some of the components out
bbsz
Seconding this. I am also looking for an out-of-the-box component as such. The standard react-json-view is too limited.

The other opensource json visualizer I found operates on the similar model as OP's project, but it also doesn't provide a standalone component.

https://github.com/AykutSarac/jsoncrack.com

loggerhead
I'm wondering, if I offer an embedding feature, would people still be as eager for a react component? For example, something similar to CodeSandbox's embedding capability.
egeozcan
Perhaps (although unlikely) this thing I created 5 years ago helps, it's a react component created to be embedded in a go app but is independent, created just to scratch my own itch and not published to npm but anyone can just vendor it:

https://github.com/egeozcan/json-tail/tree/master/data

also has storybook but no online demo I'm sorry :(

edit: ha, I also found the plain js/css/html version there, a surprise from past me https://github.com/egeozcan/json-tail/tree/master/data/legac...

[deleted]
(comment deleted)
p0358
So it runs everything locally/in web worker, but there's a monthly quota and it requires a paid plan of $9.99 monthly to keep running it on my own machine?
loggerhead
Yes, but you can also deploy it locally, so you can use it for free. May I ask, do you think that programs running locally are not worth paying for if it is open source?
devmor
I think they are understandably confused by your pricing page. Do you have to pay monthly to use the tool locally?
loggerhead
Yes, it requires regular payment, from the SaaS perspective, since the cost is a monthly expense, adopting a subscription model is understandable. This pricing was inspired by https://jsoncrack.com/. May I ask, is there anything on the pricing page that is hard to understand?
devmor
Generally, when you download a dev tool to run a tool on your own machine that is not pre-packaged software, it does not have a subscription cost. That is likely the source of confusion.

It’s unclear what service requires the expense on your side that justifies a monthly cost. I think explaining those benefits on the pricing page would help you a great deal.

slightwinder
People have no problem with paying for open source, once. A recurring payment is a different topic, especially if it's unclear for what the payment is good for, what value it has for the customer.
loggerhead
Thank you very much for your feedback! It's very insightful. Are you saying that for local tools, people are more willing to purchase through a one-time buyout rather than a subscription model? Because they feel that a subscription doesn't provide continuous value and thus isn't worth the price?
fragmede
Yes. For something like Amazon Prime where there's clearly work being done by Amazon every month in the form of shipping and TV shows, it's easier to stomach. For a product that does the job with the current set of features, it's not viewed in a positive light. But the question is do you as the developer on this product care? A lot of people will see the subscription and bounce off. They weren't going to pay you any money anyway. the thing you have to ask yourself is if you offered a $50 one time purchase option, would it generate enough sales to be worth it? or you could come up with a weird per-use scheme like Colin and Tarsnap. The push back you're getting on pricing is good! it means people see value in the product, they just aren't willing to agree to the terms you've set. now it's marketing and sales that needs to take over and figure out how to sell it, which is a totally different skillset. if you build it, they will come and turn decide it's not worth the cost of admission, so you've got to talk them into it before they turn around and go home, possibly by changing your pricing plan. At the end of the day, it isn't your fault they arrived with cash and you want to take credit cards, or they're pissed off because something bad happened in traffic on the drive over, they're your customers and you somehow have to convince some of them to give you money for this thing you've made, or else you've got to go home, hungry. Metaphorically.
loggerhead
Thank you for your support! I'm open to all kinds of feedback and want to understand different perspectives. After gathering enough input, I'll digest and understand it before making any decisions, ensuring not to take any single opinion as the whole truth.
slightwinder
People have not endless money, so they have to calculate the value and final cost of everything. And subscriptions are very, very low on the value-calculation, because it's a recurring cost which will grow over time, which means it's risky.

Additionally, people usually buy something for the value it has now, or a promised value which might materialize in the future and they consider realistic. So, if your tool has a legit reason for a subscription, people might pay for it. This means, server-costs on your side, which are realistic for the demanded price. Or a roadmap of fancy features which are actively worked on.

But paying for something regularly, where there are no ongoing costs on the sellers side, and no foreseeable positive changes in the value of the tool...this makes it really hard to reason about the cost&benefits. I mean, the tool will not change, the value is static, why pay for it again and again and again? This is like Walmart asking for a subscription for silverware..

loggerhead
Thank you for your patient explanation! A very valuable perspective —- people are not willing to continuously pay for something static that doesn't get updated. Actually, I have plans to develop some features that require a server, but as you mentioned, perhaps I should put the blueprint in the README or on the homepage to make users feel it's worth continuously paying for.

Can I conduct a small survey? I previously considered offering a feature to store users' JSON in the cloud, but I didn't see the need since there's GitHub Gist, and you can always use that, so I didn't implement it. From your perspective, would you need such a feature?

slightwinder
> I previously considered offering a feature to store users' JSON in the cloud,

I'm not sure how this would work well with the privacy-aspect and everything running locally, even if you upload them encrypted. And storage is cheap these days.

> From your perspective, would you need such a feature?

Personally, no. As a developer, I have many tools which need access to my data. And I also have many other files outside of JSON. So I need to have centralized place which all my software can equally easy access. So I don't really see the value in one specialized tool with specialized storage for me.

Maybe, people working mobile or in teams might have some value for this, but this is a very specialized group of customers. And I would think they will prefer something like Dropbox, Google Drive or OneDrive for sharing files. Maybe integrating this has more value for your customers. But then again, this is probably not an ongoing cost for you which would justify a subscription.

As you have processing as a selling-point, maybe you should try this and offer automatic remote-processing. People use tools like Zapier, IFTTT and Node-red for automating web- and service-related tasks or for business logic. Maybe you can find a special corner in terms of ability, price and/or simplicity, which is not covered well enough by the big tools. Some companies are really crazy with paying for hyper-specialized services just to let some laymen do their stuff.

loggerhead
Good idea. I've received a lot of feedback from the community with people hoping for some AI integration features. I am seriously considering this. Also, in terms of product positioning, if I do offer cloud storage, I don't intend to view JSON For You simply as a place to store files, but rather as a remote configuration management solution. Thank you once again, you're truly a deep thinker.
loggerhead
I have considered adding support for remote version manage and AI features in the future, but I'm not sure if it's a genuine need or just something I've dreamed up. You could give me some input :)
[deleted]
(comment deleted)
qiller
Looks interesting! Reminds me of XMLSpy JSON Grid view - https://www.altova.com/images/json-editor-grid.png

Any plans to make an editor on top of this?

loggerhead
I didn't know about it when I was making mine, otherwise, I would have definitely borrowed some ideas from it, haha. I have considered view-based editing functions, and I'm wondering if it's really necessary (if so, it will be supported), because now it's quite convenient to locate the editing position on the left from the right view using JSON pointers for quick editing. I'm thinking that providing editing functions in a professional editor might be more appropriate. And thank your for your suggestions.
poopsmithe
I have a UX complaint about the carousel images on https://json4u.com/

While I was looking at the image and trying to understand, the carousel moved to the next image. It's too fast, and I can't get back to the first image without it immediately switching me to the second image. I can't get it to sit still either and NOT switch to the next image. Some carousels pause themselves when the cursor is hovering over it, but this one did not pause when I did that. The only way I had enough time to digest the information was by right clicking on the image and opening it in a new tab.

loggerhead
Thank you very much for your suggestions! I will optimize its experience. By the way, have you seen the two switch buttons on either side of the carousel? I'm thinking about whether I need to adjust its background color to make it more noticeable.
BerislavLopac
The buttons are visible, but automatic switch to the next image is annoying. I suggest either disabling the switch completely, or as soon as one of the switch buttons is clicked.
pragmatick
It should at least stop autoswitching after you pressed a button. I clicked back and it instantly moved forward to the next picture again.
loggerhead
Thanks, I will change it, it's really annoying.
bath_
The pricing icons under the "free" section are also a bit confusing. I'm not sure at a glance that I'm getting or not getting "30/month graph mode view".
kragen
i've been using visidata for visualizing json and csv in table views, querying it, plotting it, etc. the node-link graph in here is something i wish visidata could do
loggerhead
You can try my website, I guarantee you'll be satisfied, haha.
kragen
i don't think it can do everything visidata can do
loggerhead
Indeed, JSON For You is significantly behind visidata in handling table data compared to it. Their focuses are different, perhaps I can learn some highlights from its design. However, if you have needs for JSON processing, you might want to give JSON For You a try, haha.
kragen
visidata can handle arbitrary json data, even if it's not tabular in form, but there are a lot of things i don't know how to do with it. json4u's jq support looks like an improvement, for example. but many of those things are probably things vd can do but that i just haven't learned how to do yet
satisfice
As with every tool like this that I have tried, it can't handle large, realistic JSONs coming down from websites. It died with a 1.5 mb JSON, I just tried, anyway.

This is why I use JQ, which I have seen tackle gigabyte-size files.

loggerhead
I've done my best to optimize it, although there's still room for improvement, but it's quite challenging (but I'll give it a try). The reason is that we're constrained by the browser's UI thread being single-threaded, so almost all online JSON tools will lag or freeze when handling large amounts of data (e.g., over 1MB).
asa400
If you want a tool to visualize/understand/grep large JSON documents, try https://github.com/ckampfe/jstream

Disclaimer: I am the author and I regularly test it on JSON documents hundreds of MBs large.

satisfice
This isn't a visualizer. It does something JQ can do (although faster).
pdyc
nice tool, i created a tool for viewing csv and i tested with my goto csv file and it crashed :-) . you might want to use paging for tables or use virtualization for table view.
loggerhead
Yes, I've thought about it, but I haven't come up with a good implementation approach. Do you have any good ideas? Here's the problem I'm facing:

I want the table view to support not just regular array but also complex object structures (like nested structures). The latter results in an irregular structure of tables within tables, and I currently don't have a good approach to implement this using a virtual list.

pdyc
tree like structure is tricky, for regular csv you can use react-virtual, react-window or use canvas based approach. Canvas based approach would work for tree like structure as well, you are already doing it with graph so it should be doable for table as well.
loggerhead
I have researched react-virtual, react-window, and canvas, and after long consideration, I ended up with the current solution. I might reconsider trying canvas again. Anyway, thanks.
hodanli
i am using https://jsonhero.io/ for a time and happy with it. but i will definitely check this out too.
loggerhead
It's a great tool, its column view is very popular, which has inspired me to think about how to support visualization features. By the way, what is your favorite feature of it, or which function do you think is the most useful?
jsyang00
It's a great tool, but no one is going to want to pay $10/mo for it.

You will get a better ROI if you replace the pricing with a link to your socials/ website.

loggerhead
You mean offering it for free to everyone, but driving traffic to social media? Also, can I ask, from a consumer's perspective, what pricing do you think would be acceptable for my product?
corytheboyd
I don’t get this point, but I 100% agree that a tool turning JSON into graphical views asking for a subscription is a blatant grift. You should be selling one-time payment perpetual licenses IMO.

You’re competing in a very crowded market of generally free tools. Unless your offering is VERY good you’re going to struggle selling at all… $5-10 maybe? That’s about as much as I’d be willing to pay for a hyper-specific tool like this if it makes one of my tasks at hand a little easier.

loggerhead
I understand your point, but I believe that a one-time payment is not conducive to its ongoing development. Think about it, if you charge all the money at once, where does the motivation to continue updating come from after a year or two? But indeed, there is an issue with pricing. You mentioned the $5-$10 price range for a perpetual license, right? If it were a subscription model, how much would you be willing to pay per month?
voshond
Never argue with a customer. The customer doesn’t give 2 cent about your motivation, it’s not their job. When I saw the pricing I had a good laugh and moved on.

If the only motivation for this product is money, then it will die in no time. Comparing the value I’m getting to the 7€ / month on Amazon prime, or the 10€ for Apple Music – that’s the value perception you’re competing against.

If you tell me you need 120€ a year from multiple customers to maintain and improve a json app good luck. One time purchase – get access – done. You can later upsell me with even more features in a v2 or whatever. I also doubt this tool has a lot of running costs to warrant this much.

Maybe if you work in SF and you make 300k a year so 10 bucks don’t mean much, but for the rest of the world 10$ is a lot of money / month.

loggerhead
Thank you very much for sharing your thoughts! Based on feedback from multiple people, it's clear there's a significant issue with the product pricing, which I'll seriously reflect upon! From your perspective, there seem to be two issues:

1. The price is too high.

2. Dislike for subscription-based payments.

I have no problem with the first point, but I'm curious why everyone dislikes the subscription model so much? Or at the end of the day, is it really because the price is too high?

girvo
> why everyone dislikes the subscription model so much

Because _everything_ is a subscription today, and even more of them make people angry. When a tool doesn't have any "infrastructure" costs per se, it rubs people the wrong way. Most don't want yet another subscription to manage

loggerhead
Interesting perspective. Let me share my thoughts, which might relate to consumer psychology:

- With a buyout system, users perceive that they own the item after payment.

- With a subscription system, users perceive that they are renting the item after payment.

When there's a mismatch in expectations (I pay to own, but you only let me rent), users feel deceived and angry. The same issue occurs with the ownership of accounts in online games, where some game companies state in their terms of service that the game account belongs to them, not the user, naturally leading to user outrage.

loggerhead
Thank you all for your suggestions and feedback, really helpful to me. I am offering a coupon for the first year free (limited to 10 uses) as a thank you: UZNZQ5NW
metalliqaz
I miss the days when this kind of tool would be something I could just install on my PC and use, rather than having to spin up server or pay a fee to use ($10 a month!?). Like this wonderful tool: https://sqlitebrowser.org/

OSS is dead.

loggerhead
I think the main reason is the rapid development of web technologies, which has significantly reduced the cost of developing software with a GUI. And web technologies are best suited for the web itself, whereas running locally would introduce additional development costs.
Aldipower
The "rapid" in development of web technologies is a lie.
loggerhead
Haha, that's a sharp critique, and I've also felt that the development of the web isn't fast enough. But actually, when you think about the web from ten years ago, or even twenty years ago, there has been significant progress.
metalliqaz
I wonder if you've ever seen an expert using Visual Studio in its heyday... Prototype GUIs could be up and running within minutes. The same was true of Java Swing, in the right hands. These technologies have fallen out of favor now, but I find it hard to believe that today's swirling pool of web frameworks have reduced the cost of GUIs compared to anything other than Web in the days of jquery. What they certainly do is change how these tools are delivered to users and customers. Perhaps that's for the better, I don't know. But I miss having all _my_ stuff on _my_ PC, that's for sure.
loggerhead
I strongly agree with your view. I used to be a loyal user of Sublime Text, it performed exceptionally well and was incredibly fast, which I loved. However, perhaps I misspoke, what I meant to say is that due to the low development costs and rich ecosystem of web technologies, current applications are more inclined to use web technology stacks when developing GUIs. But (yes, there's always a "but"), the performance of web applications is still far behind that of native applications (although there has been significant improvement).
breck
Love it! I can see the love put into this.

Snappy, a lot of features. The diff tool seems useful.

The vis tool was neat but I don't often have that need.

I did get it to crash when I dumped a JSON file containing data on every programming language ever made.

Here's my user test: https://news.pub/?try=https://www.youtube.com/embed/ERpyG_f2...

loggerhead
Thank you for your support! I have indeed put a lot of thought into it, and it's something I use often myself. The crashing with large data volumes is a known issue that many have feedbacked on. I have plans to optimize it, but I'm not overflowing with good ideas. If anyone could offer some suggestions, I would be immensely grateful!
breck
What's causing it to crash, the left panel or the right?

Are you using CodeMirror for the left panel?

loggerhead
The issue isn't with the editor itself, but rather because rendering becomes very time-consuming when there are too many DOM nodes. This is due to the specification limiting to only one main UI thread.
breck
You should learn webgl and do particle rendering.
loggerhead
Thanks. The main issue is that we can't reuse existing components, so the development workload will be quite large, but I'll think about it.
reed1
Everyone here mentions jq but no one mentions "fx". It's an awesome cli app to browse json. It can modify json too, but I think jq has shorter DSL. If you want to browse or navigate through nested json, this is the best tool I know.

I wouldn't use GUI for this simply because piping data and mouseless env are more convenient to me. These are my other use cases:

- validation & auto fixing: fix-busted-json (python)

- tabular view : visidata (vd) can do this directly on json files. it has tons of other features like histogram, charts, sort, filter, edit, etc

- summarizing and querying: duckdb. Example: select sum(price), count(*) from 'orders.json'

- conversion: json2csv, it works both way

- diff: simply diff, but sometimes jq for ordering keys is required

loggerhead
A great tool that fills the gap of lacking a preview feature in the terminal with jq. However, for data processing, I think jq's DSL is more concise and user-friendly.
iCutMoon
It seems like a clone of https://jsoncrack.com with a different UI. I couldn’t identify any significant differences aside from the reduced readability in the visualization.
loggerhead
Belittling competitors is not a good competitive strategy, the community is smart and won't be fooled by it (https://news.ycombinator.com/item?id=32626873). If you want to promote something under my post, that's fine, people will make their choices. But if you're going to unjustly discredit JSON For You by ignoring the facts, I find that unwelcome and offensive. I suggest we compete by improving our products, rather than by smearing each other or engaging in price wars :)
iCutMoon
I'm never against competition, but cloning a project is not something comparable. You’ve basically cloned an open-source project and are now trying to make money off of it. I took a look at your Terms and Privacy Policy, and you copied them word for word? That’s really disappointing. You haven’t added any substantial features to the project beyond duplicating it, and there are plenty of others doing the same what you've done. I’m honestly shocked that you’d have the audacity to post it here.
_pixel_pixy_
You must check this: https://www.v2ex.com/t/1075891

This guy posted in some forum accusing you of attacking him. But Chinese coders roasted him so well, he deleted his original post. You might need some translation, but it's satisfying!

loggerhead
Sorry, my previous response misunderstood your meaning. JSON For You does draw inspiration from JSON Crack for its landing page, thank you for designing such a minimalist homepage and I will put JSON CRACK to my acknowledgment. In terms of functionality, the two products actually have significant differences:

1. JSON Crack focuses more on visualization, whereas JSON For You aims to be a all-in-one JSON toolkit. This is why you'll find many buttons on JSON For You's page, leading to decreased readability and increased user learning curve (though I've tried my best to optimize this).

2. JSON Crack supports visualization for multiple data types including TOML and YAML, but JSON For You does not support this, nor does it plan to.

3. I've noticed JSON Crack offers AI functionalities to manipulate JSON data, but JSON For You will not pursue such features. Instead, it provides this through local tools like jq.

4. When it comes to comparison features, JSON Crack seems to provide graph-based comparison, which JSON For You does not do (nor is it its goal). Additionally, JSON For You offers text comparison, which JSON Crack does not.

Maybe I should provide a comparison table on the homepage to help everyone better understand the differences between the two products :)

DeadCarrot6
He's not apologizing, he's just scared you'll hold him accountable, for he's cloned your features and homepage, and even has the audacity to charge for it.

You ought to call him out on social media, juxtaposing a screenshot of his website with yours for comparison.

His original reply:

> Belittling competitors is not a good competitive strategy, the community is smart and won't be fooled by it (https://news.ycombinator.com/item?id=32626873). If you want to promote something under my post, that's fine, people will make their choices. But if you're going to unjustly discredit JSON For You by ignoring the facts, I find that unwelcome and offensive. I suggest we compete by improving our products, rather than by smearing each other or engaging in price wars :)

ranger_danger
Nothing and nobody starts out original. We need copying to build a foundation of knowledge and understanding. Everything is a copy of something else, the only difference is how much is actually copied, and how obvious it is. Copying is how we learn. We can't introduce anything new until we're fluent in the language of our domain, and we do that through emulation.
cmlx1014
These two products are indeed very similar.