I 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.
That'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.
If 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.
My 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 :-/
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.
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.
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).
It'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) to interact with the JSON.
This 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.
Well 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.
I 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.
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.
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.
I works, but I guess that some tweaks would make it better, like add Behave (http://jakiestfu.github.com/Behave.js/) to make easier to indent the code and a real time error console.
48 comments
[ 3.3 ms ] story [ 110 ms ] thread1) Inject JQuery as described on this website: 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.
edit: Just noticed there is indeed a footer with a link to the sourcecode. Awesome. Going to add this to IODocs tomorrow.
https://github.com/josdejong/jsoneditoronline
Sorry! I had to :)
But seriously, nice work.
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.
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.
HN submission http://news.ycombinator.com/item?id=4997493
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.
http://developer.chrome.com/apps/about_apps.html
http://fluidapp.com/
Examples: Pivotal, Harvest, Planscope, YCN
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&an...
2. http://superuser.com/questions/338266/how-can-i-make-chrome-...
Or maybe the other way around?
https://github.com/josdejong/jsoneditoronline 200+ stars
https://github.com/tburch/jsonblob 50+ stars
I definitely have a use for this in a current project, so thank you!
It updates live and checks for validity, too.
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.
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.
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.
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.
I've been using this to debug JSON: 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).