

JSON Editor Online - benackles
http://jsoneditoronline.org/

======
gsibble
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.

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

<https://github.com/josdejong/jsoneditoronline>

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

------
mikeknoop
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

~~~
tburch
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.

~~~
k3n
Hey that's pretty nifty, too!

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

~~~
Posibyte
This is also open source: <https://github.com/josdejong/jsoneditoronline>

~~~
tectonic
Cool, their's is nicer. :)

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

~~~
cjfont
_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.

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

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

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

~~~
grinich
You can do exactly that with packaged apps in Chrome.

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

~~~
jiggy2011
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.

~~~
gsibble
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

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

~~~
gsibble
Actually, I made this work:

1) Inject JQuery as described on this website:
[http://www.learningjquery.com/2009/04/better-stronger-
safer-...](http://www.learningjquery.com/2009/04/better-stronger-safer-
jquerify-bookmarklet)

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.

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

~~~
ajasmin
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.

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

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

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

------
6ren
<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>

------
JacobIrwin
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...](http://philogb.github.com/jit/static/v20/Jit/Examples/RGraph/example1.html))...
So, hey - thanks for sharing!

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

------
510
Reminds me of this <http://jsondiff.com/>

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

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

It updates live and checks for validity, too.

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

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

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

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

------
mxuribe
Pretty freakin awesome! Kudos!

------
khalidmbajwa
Ruddy brilliant man. Kudos !

------
nXqd
why not live updating :(

