5 ms·
Show HN: JSON For You – Visualize JSON in graph or table views
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!
- netcraft 2y agoI love json tools, I use several like https://jsoneditoronline.org/ https://jsoneditoronline.org/ Any chance of a hosted version?
- mrits 2y agothere is a link to one at the top under 'Get Started' I figured it was a link to documentation though
- loggerhead 2y agoNot 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.
- loggerhead 2y agoYes, of course. You can use it at https://json4u.com https://json4u.com.
- vvern 2y agoWhat 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 2y agoWhat 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 2y agoAlready uses React, so might be able to rip some of the components out
- bbsz 2y agoSeconding 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 https://github.com/AykutSarac/jsoncrack.com
- loggerhead 2y agoI'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 2y agoPerhaps (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 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/legacy https://github.com/egeozcan/json-tail/tree/master/data/legac...
- egeozcan 2y agothe exact table display component is here: https://github.com/egeozcan/json-tail/tree/master/data/src/apps/logsApp/components/tableDisplay https://github.com/egeozcan/json-tail/tree/master/data/src/a...
- p0358 2y agoSo 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 2y agoYes, 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 2y agoI think they are understandably confused by your pricing page. Do you have to pay monthly to use the tool locally?
- loggerhead 2y agoYes, 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/ https://jsoncrack.com/. May I ask, is there anything on the pricing page that is hard to understand?
- devmor 2y agoGenerally, 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 2y agoPeople 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.
- qiller 2y agoLooks interesting! Reminds me of XMLSpy JSON Grid view - https://www.altova.com/images/json-editor-grid.png https://www.altova.com/images/json-editor-grid.png Any plans to make an editor on top of this?
- loggerhead 2y agoI 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 2y agoI have a UX complaint about the carousel images on https://json4u.com/ 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.
- Kerrick 2y agohttps://shouldiuseacarousel.com https://shouldiuseacarousel.com
- loggerhead 2y agoThank 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 2y agoThe 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.
- loggerhead 2y agoThanks, I will change it.
- pragmatick 2y agoIt should at least stop autoswitching after you pressed a button. I clicked back and it instantly moved forward to the next picture again.
- kragen 2y agoi'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 2y agoYou can try my website, I guarantee you'll be satisfied, haha.
- kragen 2y agoi don't think it can do everything visidata can do
- loggerhead 2y agoIndeed, 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 2y agovisidata 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 2y agoAs 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 2y agoI'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 2y agoIf you want a tool to visualize/understand/grep large JSON documents, try https://github.com/ckampfe/jstream https://github.com/ckampfe/jstream Disclaimer: I am the author and I regularly test it on JSON documents hundreds of MBs large.
- loggerhead 2y agonice work!
- satisfice 2y agoThis isn't a visualizer. It does something JQ can do (although faster).
- pdyc 2y agonice 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 2y agoYes, 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 2y agotree 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 2y agoI 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 2y agoi am using https://jsonhero.io/ https://jsonhero.io/ for a time and happy with it. but i will definitely check this out too.
- loggerhead 2y agoIt'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?
- loggerhead 2y agoThank 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
- jsyang00 2y agoIt'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 2y agoYou 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 2y agoI 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 2y agoI 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 2y agoNever 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.
- metalliqaz 2y agoI 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/ https://sqlitebrowser.org/ OSS is dead.
- loggerhead 2y agoI 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 2y agoThe "rapid" in development of web technologies is a lie.
- loggerhead 2y agoHaha, 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 2y agoI 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 2y ago
- breck 2y agoLove 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_f2gJE?si=ItqT1mPweRQZJ75h https://news.pub/?try=https://www.youtube.com/embed/ERpyG_f2...
- loggerhead 2y agoThank 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 2y agoWhat's causing it to crash, the left panel or the right? Are you using CodeMirror for the left panel?
- loggerhead 2y agoThe 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 2y agoYou should learn webgl and do particle rendering.
- loggerhead 2y agoThanks. 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 2y agoEveryone 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
- 20after4 2y ago+1 for fx, it's absolutely awesome. https://fx.wtf/ https://fx.wtf/
- loggerhead 2y agoA 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.
- ranger_danger 2y agofx looks a lot like jless: https://jless.io/ https://jless.io/
- iCutMoon 2y agoIt seems like a clone of https://jsoncrack.com https://jsoncrack.com with a different UI. I couldn’t identify any significant differences aside from the reduced readability in the visualization.
- loggerhead 2y agoBelittling 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 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 2y agoI'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_ 2y agoYou must check this: https://www.v2ex.com/t/1075891 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 2y agoSorry, 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 :)
- cmlx1014 2y agoThese two products are indeed very similar.