9 ms·
JSON Editor Online
- thejosh 14y agoWould be cool if it was live to both rather than clicking the arrows.
- deleted 14y ago[deleted]
- gsibble 14y agoActually, I made this work: 1) Inject JQuery as described on this website: http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet http://www.learningjquery.com/2009/04/better-stronger-safer-... 2) Then open your JS console and copy and paste this in: $("textarea").keyup(function(){ try { formatter.set(editor.get()) } catch (a) { notify.showError(a) } }); And viola! It will change in real time from the left side to the right. Doing the opposite should be trivial. Enjoy. PS: This is a total hack obviously. Not production stuff.
- gsibble 14y agoI love this! Who made it and is it open source? I'd love to combine it with IODocs so that you can query an API and not only see JSON but also explore the objects contents. edit: Just noticed there is indeed a footer with a link to the sourcecode. Awesome. Going to add this to IODocs tomorrow.
- 8ig8 14y agoHere's the link from the site's footer. It's easy to miss. https://github.com/josdejong/jsoneditoronline https://github.com/josdejong/jsoneditoronline
- jaredmcateer 14y agoEasy to miss is an understatement, I couldn't even tell there was a footer on my crappy work monitor.
- tectonic 14y agoI wrote a JSON editor widget a while ago that's open source as well: https://github.com/cantino/jsoneditor https://github.com/cantino/jsoneditor
- gsibble 14y agoNice. Do you have it running somewhere?
- tectonic 14y ago(I'm currently re-writing it in CoffeeScript and adding some fixes.)
- Posibyte 14y agoThis is also open source: https://github.com/josdejong/jsoneditoronline https://github.com/josdejong/jsoneditoronline
- tectonic 14y agoCool, their's is nicer. :)
- mxuribe 14y agoPretty freakin awesome! Kudos!
- binarydreams 14y agoSeems good and hopefully I am getting it right. But you could also use the dev tools - http://i.imgur.com/gyaDIc7.png http://i.imgur.com/gyaDIc7.png
- ajasmin 14y agoThat's what I tend to do, but a web page where I can just paste a bunch of unformatted JSON is also nice to have. Especially if you're on a browser where the dev tools are not installed or you don't know how to access them. Say a smart phone, tablet, Firefox without Firebug installed or something.
- lukeholder 14y agoIf you need to use buttons to duplicate nodes of json or delete nodes, collapse code, or change data types, you need to learn you text editor better. I mean also, CMD+Z is a little better than having to click an undo button.
- arjn 14y agoNicely done. I've passed it on to the rest of my team.
- leetrout 14y agoMy sole use of jsonlint.com is for quickly formatting JSON. JSONLint will format the input and then show the error which is handy for all sorts of data structures that are close to JS objects (Python dicts, for example). I was hopeful this would be a great companion / alternative but it appears that it won't format the input if detects a parse error :-/ I guess it's best for its intended purpose.
- zeeshanlakhani 14y agobtw... there's been an update to jsonlint... that def. fixes the ui => http://pro.jsonlint.com/ http://pro.jsonlint.com/
- 6ren 14y agohttp://jsonblob.com/api http://jsonblob.com/api uses this, for manual creation of JSON responses, to mock an end-point during development [my paraphrase]. Can then be updated programmatically. HN submission http://news.ycombinator.com/item?id=4997493 http://news.ycombinator.com/item?id=4997493
- jiggy2011 14y agoOk, so rant here. This shows the problem with browser apps. This is the sort of thing I find useful when I am doing JSON heavy work. However when I am working I often end up with about 20+ tabs open in my browser that I switch between quite regularly. So everytime I want to get back to this I have to find which tab I left it in. I should be able to dock this like my other apps and switch back and forth between this and my general browsing session like I do my browser and terminal. Would also be way more usable with keyboard shortcuts which are not conductive to a browser environment.
- grinich 14y agoYou can do exactly that with packaged apps in Chrome. http://developer.chrome.com/apps/about_apps.html http://developer.chrome.com/apps/about_apps.html
- jiggy2011 14y agoLooks good, sadly seems to require work on the part of the developer. Would be great to just be able to do this on arbitrary webpages.
- gsibble 14y agoI use Fluid to take websites that I use constantly and turn them into essentially native Mac apps. Works like a charm: http://fluidapp.com/ http://fluidapp.com/ Examples: Pivotal, Harvest, Planscope, YCN
- sauerbraten 14y agoOn Github there is a link to the Chrome App:https://chrome.google.com/webstore/detail/json-editor/lhkmoheomjbkfloacpgllgjcamhihfaj https://chrome.google.com/webstore/detail/json-editor/lhkmoh...
- k3n 14y agoBut wait, there's more! You can definitely do that; see the "Create shortcuts for other apps" section of this help page[1]. You can make a shortcut that can be used like any other Windows shortcut (say, in the quicklaunch), it takes on the icon of the page's favicon (both the shortcut icon and the window's icon), and it launches in its own window. Also, see here[2] for additional options (like auto-maximize support). 1. https://support.google.com/chrome/bin/answer.py?hl=en&answer=95710 https://support.google.com/chrome/bin/answer.py?hl=en&an... 2. http://superuser.com/questions/338266/how-can-i-make-chrome-application-shortcuts-start-maximized http://superuser.com/questions/338266/how-can-i-make-chrome-...
- rgrieselhuber 14y agoI love this tool. It would be perfect if I could save versions of the data, a la jsFiddle.
- JacobIrwin 14y agoI was looking for this in the morning today actually (while working on this JIT Rgraph Tree: http://philogb.github.com/jit/static/v20/Jit/Examples/RGraph/example1.html http://philogb.github.com/jit/static/v20/Jit/Examples/RGraph...)... So, hey - thanks for sharing!
- EugeneOZ 14y agoIt's exactly what I need for the current project! Thank you very much!
- mikeknoop 14y agoI think this is just someone rehosting Json Blob (http://jsonblob.com/ http://jsonblob.com/) and throwing an advert on the right-half column. Or maybe the other way around? https://github.com/josdejong/jsoneditoronline https://github.com/josdejong/jsoneditoronline 200+ stars https://github.com/tburch/jsonblob https://github.com/tburch/jsonblob 50+ stars
- cheeaun 14y agoLooks like the other way around, judging from this file https://github.com/tburch/jsonblob/blob/master/web-app/js/jsoneditor.js https://github.com/tburch/jsonblob/blob/master/web-app/js/js...
- tburch 14y agoIt's the other way around. I built JSON Blob on top of JSON Editor Online so that I could have an API (http://jsonblob.com/api http://jsonblob.com/api) to interact with the JSON.
- k3n 14y agoHey that's pretty nifty, too!
- nXqd 14y agowhy not live updating :(
- jameswyse 14y agoThis is really nice, the only thing I'd add is live updating (rather than having to press the < or > buttons.) I definitely have a use for this in a current project, so thank you!
- 510 14y agoReminds me of this http://jsondiff.com/ http://jsondiff.com/
- beaumartinez 14y agoMy go-to editor is http://jsonviewer.stack.hu/ http://jsonviewer.stack.hu/
- sauerbraten 14y agoMy go-to site for this kind of thing: http://json.parser.online.fr/ http://json.parser.online.fr/ It updates live and checks for validity, too.
- khalidmbajwa 14y agoRuddy brilliant man. Kudos !
- aidos 14y agoThis is a really cool project and it's nicely implemented. Even better, I can actually see me using this. I just finished a project recently for a relatively technical client. All the config for the system (quite a lot of config) was stored in mongo. This would be the perfect interface for allowing them to manage it. Thanks to the creator. I will use this.
- Meai 14y agoWell apparently everyone thinks this is awesome, so I'll be that guy who is helpful but everybody ignores: There is no point to it, what are you trying to achieve? Make JSON more readable? It's debatable that you achieved it with this, formatting JSON can be done already on jslint.com and the only feature you add is some color. Is the collapsing JSON your main feature? Well it is bad. It's hard to click on. There is no way to collapse multiple fields quickly. Oh and if I change or add fields on the right, they don't get reflected on the left. So I can't even get the modified JSON back out. Frankly I think it's amazing how useless this actually is.
- niyazpk 14y agoI had the same feeling a few hours ago when I saw this first, but now I when I think about it, it looks mildly useful. There are a few cases in our company where designers need to provide developers with JSON (for whatever reason) and this tool will help them to edit JSONs without worrying about screwing up the syntax. BTW you can copy the changes in either section by clicking the arrow between the two sections.
- cjfont 14y agoOh and if I change or add fields on the right, they don't get reflected on the left. So I can't even get the modified JSON back out. I'm not sure what you're talking about, when I click the triangle pointing left in the middle, it does in fact convert back to JSON. To me this is extremely useful on a web app as an easy way to allow for non-coders to modify JSON-backed settings and not have to worry about formatting commas, quotes, or curly braces. Sure, maybe there's room for improvement, but I think the concept definitely has its place and is far from useless.
- kidh0 14y agoI works, but I guess that some tweaks would make it better, like add Behave (http://jakiestfu.github.com/Behave.js/ http://jakiestfu.github.com/Behave.js/) to make easier to indent the code and a real time error console.
- SolarUpNote 14y agoThis is really great. I've been using this to debug JSON: http://jsonformatter.curiousconcept.com/ http://jsonformatter.curiousconcept.com/ But I've always wanted code collapsing. (and have been surprised that I couldn't find a nice JSON editor like this).