JSON Editor Online | Hacker News Reader

JSON Editor Online

jsoneditoronline.org

162 pointsbenackles47 comments

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.

Here's the link from the site's footer. It's easy to miss.

https://github.com/josdejong/jsoneditoronline

Easy to miss is an understatement, I couldn't even tell there was a footer on my crappy work monitor.

I think this is just someone rehosting Json Blob (http://jsonblob.com/) and throwing an advert on the right-half column.

Or maybe the other way around?

https://github.com/josdejong/jsoneditoronline 200+ stars

https://github.com/tburch/jsonblob 50+ stars

Looks like the other way around, judging from this file https://github.com/tburch/jsonblob/blob/master/web-app/js/js...

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.

Hey that's pretty nifty, too!

I wrote a JSON editor widget a while ago that's open source as well: https://github.com/cantino/jsoneditor

Nice. Do you have it running somewhere?

Yup: http://iterationprojects.com/jsoneditor/example.html

http://cdn.memegenerator.net/instances/400x/24468350.jpg

Sorry! I had to :)

But seriously, nice work.

(I'm currently re-writing it in CoffeeScript and adding some fixes.)

This is also open source: https://github.com/josdejong/jsoneditoronline

Cool, their's is nicer. :)

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.

This is really great.

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).

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.

Ok, 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.

You can do exactly that with packaged apps in Chrome.

http://developer.chrome.com/apps/about_apps.html

Looks 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.

I use Fluid to take websites that I use constantly and turn them into essentially native Mac apps. Works like a charm:

http://fluidapp.com/

Examples: Pivotal, Harvest, Planscope, YCN

On Github there is a link to the Chrome App:https://chrome.google.com/webstore/detail/json-editor/lhkmoh...

But 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&an...

2. http://superuser.com/questions/338266/how-can-i-make-chrome-...

Windows are still a thing.

If you're on OS X, http://fluidapp.com/

Would be cool if it was live to both rather than clicking the arrows.

Actually, I made this work:

1) 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.

Seems good and hopefully I am getting it right. But you could also use the dev tools - http://i.imgur.com/gyaDIc7.png

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.

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 :-/

I guess it's best for its intended purpose.

btw... there's been an update to jsonlint... that def. fixes the ui => http://pro.jsonlint.com/

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.

Thanks to the creator. I will use this.

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

I 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...)... So, hey - thanks for sharing!

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.

Reminds me of this http://jsondiff.com/

This 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!

My go-to site for this kind of thing: http://json.parser.online.fr/

It updates live and checks for validity, too.

My go-to editor is http://jsonviewer.stack.hu/

I love this tool. It would be perfect if I could save versions of the data, a la jsFiddle.

It's exactly what I need for the current project! Thank you very much!

Nicely done. I've passed it on to the rest of my team.

Pretty freakin awesome! Kudos!

Ruddy brilliant man. Kudos !

why not live updating :(

Reply on news.ycombinator.com