Here I would like to present a tool for formatting and coloring raw JSON code. Very often if you use JSON generated by server side code it will be in a nice compact format but at the same time it will be quite hard to read it and possibly alter it. So the tool allows you to make your JSON more readable. For example if you have code like this:

[[{anArray:[2,3,4,["string1","string2",{aa:[]}], {"type":"simpleObject"},null],abotherProperty:"",anObject:{justANumber:2,func:function(){if(1>0)return false; else return true;}}}],true]

it is a real challenge to find something you need inside the graph. In this case the JSON formatter is the right tool for you.

You can see it at: http://bodurov.com/JsonFormatter/

The tool is actually just a single simple HTML page with inline script and styles. There are no includes or dependencies. There is no server code so it will run on any operating system (Windows, Mac, Linux and what have you) under any modern browser, the best formatting I think is under Firefox, but it works fine with Internet Explorer and Safari.

You can download it and use it from your desktop here: http://www.codeplex.com/QuickJsonFormatter

Share this post:   digg     Stumble Upon     del.icio.us     E-mail

Phil Factor
Posted on 7/5/2008 11:24:19 AM

Vladimir,
That is absolutely wonderful. I've been looking everywhere for something like this! This is absolutely ideal. Have you told the good people at http://www.json.org/ what you've done?

Vladimir Bodurov
Posted on 7/5/2008 12:25:14 PM

Thank you Phil!

I rather think that this is a simple and not so special program but I am glad that you find it useful.

Stuart Sierra
Posted on 1/30/2009 10:34:07 AM

Thanks for making this, Vladimir. This is better than other JSON formatters I've seen.

Bambang Puji
Posted on 4/27/2009 9:30:13 AM

Thank you very much for making this script. It was a nice job, Vladimir. Very useful for me. Simple code with powerful function.

Vladimir Bodurov
Posted on 4/28/2009 1:36:50 AM

Thank you, I've added today an option to collapse and object or array. This way it is easier to visualize large data.

JMart
Posted on 9/23/2009 11:28:15 AM

Great work Vladimir.
This is so very useful.
My hat is off to you!
Thank you.

Peter Kellner
Posted on 11/7/2009 8:44:15 AM

Great tool! wrote a mini review of it here:

http://peterkellner.net/2009/11/06/formatting-json-best-tool/

Vladimir Bodurov
Posted on 11/7/2009 10:25:28 AM

Thanks Peter!

David
Posted on 11/12/2009 4:14:02 PM

I really like your JSON formatter!

One request, if the keys come in quoted, can we keep them quoted? Or make this an option?

Thanks!

David

David
Posted on 11/16/2009 1:14:43 PM

Thank you for putting in the key quoting! It works great.

David
Posted on 11/17/2009 4:40:15 PM

Another request.

When you de-escape strings it makes it so I can't copy and paste the parsed data into other tools.

For instance:
{"key":"\\escaped\\values\\by\\slashes"}

Becomes:
{
"key":"\escaped\values\by\slashes"
}

But this is not valid JSON, since \e \v \b and \s are not the same as \\e \\v \\b and \\s.

This reminds me of one other suggestion ... the ability to copy an entire expanded block. Ctrl-A selects the entire page not just the parsed text.

Thanks!

David

David
Posted on 11/18/2009 12:08:02 PM

Thanks again for your prompt update!

Cassius Seeley
Posted on 12/14/2009 7:38:55 AM

Hi Vladimir,

This is fantastic! I was looking for something that would handle all of the processing on the client side and this application is just what I needed.

I do have one suggestion: When a JSON packet fails validaiton, highlighting the area of the failure would be quite useful.

Thanks again for such a great application!

Cassius

Gil Galindo Bucio
Posted on 3/22/2010 1:11:37 PM

I came across this tool by accident, and wow! It's really amazing and useful.

Congratulations, keep the good work.

Greetings from México.

Lee Crawford
Posted on 4/27/2010 5:40:54 PM

Is there a way to send a link to this page with JSON to be formatted. e.g., POST to your page?

Vladimir Bodurov
Posted on 4/27/2010 7:13:52 PM

I added a button "link to this json"

Panos
Posted on 7/6/2010 2:57:57 AM

Thank you very much !

Currently doesn't handle Dates and Regex
I added the following lines in the ProcessObject function (just Date)

}else if(type == 'object'){
+ if (obj.constructor == (new Date).constructor) {
+ return html + FormatLiteral("new Date(" + obj.getTime() + ") // " + obj.toLocaleString(), "", comma, indent, isArray, "Date");
+ }
+ // if (obj.constructor == (new RegExp).constructor) {

var numProps = 0;
for(var prop in obj) numProps++;

Vladimir Bodurov
Posted on 7/6/2010 9:37:21 AM

Thank you Panos, this is a good idea to distinguish date and regex.

nlac
Posted on 8/8/2010 9:15:29 AM

Hi Vladimir,
thanks for it! It is a great 2-in-1 formatter+highlighter, just what i needed.

Just for fun: i especially wanted to quickly view the content of php session files formatted (what is "almost" json:)), so inserted this dirty code right after the row [code]var json = $id("RawJson").value;[/code] seems like did do the trick:

json = json.replace(/[|;]?a\:\d+/g,""); 
json = json.replace(/;i\:(\d+);/g,";s:0:$1;"); 
json = json.replace(/i\:(\d+)/g,"\"$1\""); 
json = json.replace(/([}{;]?)s\:\d+\:/g, function(str, p1, offset, s){ 
	if (!!p1 && p1 == "{") { 
		counter = 0; 
		return "{"; 
	} 
	if (!!p1 && p1 == "}") { 
		counter = 0; 
		return "},"; 
	} 
	return (counter++%2) ? "," : ":"; 
}); 
json = json.replace(/;\}/g,"}"); 
json = json.replace(/^\w+\:/g,""); 

Regards
nlac, Hungary

Vladimir Bodurov
Posted on 8/8/2010 2:46:02 PM

Thanks Nlac, that is interesting

Jordan
Posted on 9/1/2010 8:56:11 AM

WOW- I see this tool is already 2 years old, but I just discovered it yesterday. Saved me a huge amount of headaches figuring out 2 JSON feeds I have to deal with. THANK YOU Vlad - you rock!

Kent
Posted on 9/24/2010 10:04:39 AM

Very nice! Excellent, thank you.

I really wish it weren't such a weird font. A very plain maybe even monospace font would be nicer when reading data, don't you agree?

Natt
Posted on 12/21/2010 12:35:40 AM

Simple yet brilliant! There is no better tool for JSON formatting.

Thanks a lot, may the gods grants you everything you want in beer equivalent.

email marketing software
Posted on 2/21/2011 7:21:26 PM

I'm with Jordon on this one. Thank you SO much for sharing the wealth on JSON formatting. It certainly hasn't been a strong suit of mine. Then again, anything involving code (HTML, Javascript, Actionscript) has never been easy for me. Heck, I'll take any tool I can get. Thanks for sharing, Vlad!

Celeste Sobers
3rd Year @ CUNY Hunter College

BytesLand
Posted on 3/4/2011 2:28:33 AM

Thanks for the post. I just happened to run into this issue (well apparently not an issue) earlier today and made a mental note to figure this out sometime. And now I just stumble on your post :) JSON format is a compact format to get data from various Web Services. The JSON formatter described here has been useful to me for understanding the data structure to develop my projects. I hope many users will find this info useful too.

yohimbine
Posted on 4/4/2011 10:14:40 AM

stumble on your post :) JSON format is a compact format to get data from various Web Services. The JSON formatter de

Desk Gadgets
Posted on 4/16/2011 2:25:25 PM

with Jordon on this one. Thank you SO much for sharing the wealth on JSON formatting. It certainly hasn't been a strong suit of mine. Then again, anything involving code

Blackberry 9800 Torch Review
Posted on 5/2/2011 5:34:09 AM

This is a great tool. I really needed some thing like this. Thanks a lot.

Amy
Posted on 6/3/2011 3:10:48 PM

Thank you so much for this JSON formatting tool. Now my JSON looks good!

Amar D. Guru
Posted on 6/24/2011 7:16:12 AM

The expand and collapse buttons allow me to view complex JSON objects that I have created myself in a manageable way. Essentially, the whole JSON tree represents a lot of application logic, but at any one point in time I am interested only in looking at a few branches. The way you allow expanding to certain levels or nodes makes it very easy to focus in on what is important.
Bravo!

Ajay
Posted on 7/21/2011 11:50:03 PM

I could not download files from http://quickjsonformatter.codeplex.com/releases/view/10136?ProjectName=quickjsonformatter, The response is "There are no downloads associated with this release." Can you provide the updated URL please.

Thanks in Advance.
Ajay

Vladimir Bodurov
Posted on 7/22/2011 12:26:43 AM

http://quickjsonformatter.codeplex.com/SourceControl/list/changesets download link, or just view source from http://bodurov.com/JsonFormatter/ - everything is inline

Please post your comments:

Name:  
Email (optional): Your email address will not be posted.
Comments: HTML will be ignored, URLs will be converted to hyperlinks  
Enter the text you see in the box: