Monday, November 19th, 2007

JavaScript Beautify

Category: JavaScript, Utility

We often talk about the latest scheme for compressing and minimizing our JavaScript. The JavaScript Beautify script aims to do the opposite.

Often, you find a site that is doing something interesting and you want to learn how it works. You check out the source and it is cryptic gibberish. This is where the beautifier comes in to make it a touch more readable.

For example, it can take:


  1. /*   paste in your own code and press Beautify button   */var latest_changes=new Object({'2007-10-17':'Many, many fixes and improvements. Processing speed is also back.','... who cares ...','2007-02-08':'Initial release'});var a=b?(c%d):e[f];

and gives you:


  1. /*   paste in your own code and press Beautify button   */
  2. var latest_changes = new Object({
  3.     '2007-10-17': 'Many, many fixes and improvements. Processing speed is also back.',
  4.     '... who cares ...',
  5.     '2007-02-08': 'Initial release'
  6. });
  7. var a = b ? (c % d) : e[f];

Posted by Dion Almaer at 6:16 am

4.4 rating from 37 votes


Comments feed TrackBack URI


Here’s one I wrote a few months ago as a comparison.

Mine is actually written in JavaScript.

Comment by Kae Verens — November 19, 2007

Nice post because I happen to have a use for this today. ;-)

Compared the output to the one that Kae Verens mentioned/wrote. The output is pretty similar other than that the new one does a better job at managing whitespace.

Comment by Andy Kant — November 19, 2007

I really like Aptana for its code formatter – which does a good job at formatting JS code – it doesn’t go as far as other Eclipse-based formatters for beautifying scripting language code in terms of customizable formatting rules, but it still works nicely to help coding well-structured JS source.

Comment by Bernd Matzner — November 19, 2007

Awesome post. I just happen to be curious about a piece of google analytics code today and this helped quite a bit.
One minor thing i noticed though:

var a = b ? (c % d) : e[f];

Looks like it doesn’t translate this into a formal if and else clause. It’s very minor to ppl who don’t mind the shortened syntax.

Comment by Simon Jia — November 19, 2007

@Simon, I know some people prefer the longer if…else form, but personally, I like short ternary code. I think the point of this is not to change code – just make it more readable.

Comment by Kae Verens — November 19, 2007

I’m with Kae in preferring ternary clauses (and I think most other people would agree, especially in the case of a beautifier which is meant to increase readability). Expanding ternary clauses wouldn’t really be an option for these JavaScript beautifiers since ternary clauses tend to be embedded all over the place and there isn’t an equivalent to a code block such as:

SomeLib.someMethod(someVar ? 37 : (someOtherVar > 0 ? someOtherVar : -1));

without doing some pretty complex code analysis.

Comment by Andy Kant — November 19, 2007

Hmm, problem is that won’t work well for huge scripts. Last time i tried it with a huge one it crashed. There is another one that works good with large scripts and is faster.
It uses to built in toString()-funtions in the browser and is like 4 lines long:
The script, however, has to be valid.

Comment by Olle Lundberg — November 20, 2007

There is a disclaimer though – since it uses the built in function in the browser:

For best results, use Opera, Safari or Konqueror on this page. It partially works in Firefox (nested functions are not tidied, meaning that most scripts you want to tidy still end up unreadable), and fails to reformat code in IE and iCab.

Comment by Olle Lundberg — November 20, 2007

Hi everybody!
So, i translate it from php to javascript :)

Comment by Vital — November 21, 2007 .. I think this one’s been around since 2003 or something? A personal favourite.

Comment by Scott Schiller — November 22, 2007

Leave a comment

You must be logged in to post a comment.