Find file
Fetching contributors…
Cannot retrieve contributors at this time
487 lines (435 sloc) 18.4 KB
<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en-us" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en-us" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en-us" class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html lang="en-us"><!--<![endif]-->
<meta charset="utf-8">
<title>Online JavaScript beautifier</title>
* {
margin: 0;
padding: 0;
.ie6 div {
display: none
.ie6 #ie6-go-away {
display: block !important;
img {
border: 0;
display: block;
vertical-align: baseline;
#blurb {
width: 260px;
float: right;
margin-top: -35px; /* pull up by the amount of non-floated content in
the sibling container. */
#beauty {
border-top: 1px solid #f6f6f6;
margin-left: 5px;
margin-right: 270px;
body {
background: #eee;
body, button, select, label {
font:13px/1.231 arial, sans-serif;
select, label {
font-size: 12px;
body, html {
height: 100%;
color: #333;
textarea {
color: #444;
height: 100%;
width: 100%;
border: 0;
font-family: Monaco, Consolas, monospace;
.ie7 fieldset#textarea-wrap {
padding: 5px 0;
.ie8 fieldset#textarea-wrap {
padding: 5px 0 0 5px;
fieldset {
border: 0;
ul, li {
list-style: none;
a {
color: #36d;
fieldset#textarea-wrap {
height: auto;
position: absolute;
background: white;
left: 0;
top: 0px;
right: 0;
bottom: 0;
display: block;
margin-left: 5px;
margin-bottom: 5px;
margin-right: 270px;
margin-top: 40px;
border: 1px solid #ccc;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
padding: 5px;
button#submit {
margin-top: 5px;
height: 30px;
line-height: 28px;
width: 100%;
border: 1px solid #aaa;
border-left: 1px solid #666;
border-top: 1px solid #666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
background: #ccc;
background-image: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#CCCCCC));
background-image: -webkit-linear-gradient(top, #EEEEEE, #CCCCCC);
background-image: -moz-linear-gradient(top, #EEEEEE, #CCCCCC);
background-image: -ms-linear-gradient(top, #EEEEEE, #CCCCCC);
background-image: -o-linear-gradient(top, #EEEEEE, #CCCCCC);
background-image: linear-gradient(top, #EEEEEE, #CCCCCC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEEEEE', EndColorStr='#CCCCCC');
cursor: pointer;
color: #444;
button#submit em {
font-size: 11px;
font-style: normal;
color: #999;
label {
cursor: pointer;
#options {
margin-top: 5px;
margin-bottom: 15px;
#options li {
margin-bottom: 4px;
font-size: 90%;
#options select {
font:13px/1.231 arial, sans-serif;
padding: 0 5px;
width: 220px;
#tabsize {
margin-top: 2px;
#brace-style {
margin-bottom: 6px;
#blurb h2 {
font-size: 12px;
font-weight: bold;
color: #555;
#blurb p {
line-height: 140%;
font-size: 11px;
margin-right: 16px;
margin-bottom: 11px;
#footer {
font-size: 11px;
line-height: 140%;
#blurb {
margin-bottom: 4px;
#blurb p.contributors {
color: #666;
#blurb #uses li {
font-size: 11px;
margin-bottom: 4px;
margin-right: 4px;
#blurb #uses li.writeme {
font-style: normal;
color: #888;
margin-bottom: 30px;
line-height: 130%;
@media (max-width: 500px) {
#beauty {
position: relative;
margin: 0 5px;
height: 80%;
fieldset#textarea-wrap {
top: 40px;
bottom: 0;
margin: 0;
#blurb {
float: none;
margin: 0 auto;
<script src="jquery/jquery.js"></script>
<script src="jquery/jquery.cookie.js"></script>
<script src="beautify.js"></script>
<script src="beautify-css.js"></script>
<script src="beautify-html.js"></script>
<script src="tests/sanitytest.js"></script>
<script src="tests/beautify-tests.js"></script>
<script src="unpackers/javascriptobfuscator_unpacker.js"></script>
<script src="unpackers/urlencode_unpacker.js"></script>
<script src="unpackers/p_a_c_k_e_r_unpacker.js"></script>
<script src="unpackers/myobfuscate_unpacker.js"></script>
var the = {
beautify_in_progress: false
if (/chrome/.test(navigator.userAgent.toLowerCase())) {
// this dummy function alleviates Chrome large string corruption by
// probably shoveling the corruption bug to some other area
String.prototype.old_charAt = String.prototype.charAt;
String.prototype.charAt = function (n) { return this.old_charAt(n); }
function run_tests() {
var st = new SanityTest();
function any(a, b) {
return a || b;
function read_settings_from_cookie() {
$('#tabsize').val(any($.cookie('tabsize'), '4'));
$('#brace-style').val(any($.cookie('brace-style'), 'collapse'));
$('#detect-packers').attr('checked', $.cookie('detect-packers') !== 'off');
$('#preserve-newlines').attr('checked', $.cookie('preserve-newlines') !== 'off');
$('#keep-array-indentation').attr('checked', $.cookie('keep-array-indentation') === 'on');
$('#indent-scripts').val(any($.cookie('indent-scripts'), 'normal'));
$('#space-before-conditional').attr('checked', $.cookie('space-before-conditional') !== 'off');
function store_settings_to_cookie() {
var opts = { expires: 360 };
$.cookie('tabsize', $('#tabsize').val(), opts);
$.cookie('brace-style', $('#brace-style').val(), opts);
$.cookie('detect-packers', $('#detect-packers').attr('checked') ? 'on' : 'off', opts);
$.cookie('preserve-newlines', $('#preserve-newlines').attr('checked') ? 'on' : 'off', opts);
$.cookie('keep-array-indentation', $('#keep-array-indentation').attr('checked') ? 'on' : 'off', opts);
$.cookie('space-before-conditional', $('#space-before-conditional').attr('checked') ? 'on' : 'off', opts);
$.cookie('indent-scripts', $('#indent-scripts').val(), opts);
function unpacker_filter(source) {
var trailing_comments = '';
var comment = '';
var found = false;
do {
found = false;
if (/^\s*\/\*/.test(source)) {
found = true;
comment = source.substr(0, source.indexOf('*/') + 2);
source = source.substr(comment.length).replace(/^\s+/, '');
trailing_comments += comment + "\n";
} else if (/^\s*\/\//.test(source)) {
found = true;
comment = source.match(/^\s*\/\/.*/)[0];
source = source.substr(comment.length).replace(/^\s+/, '');
trailing_comments += comment + "\n";
} while (found);
if (P_A_C_K_E_R.detect(source)) {
// P.A.C.K.E.R unpacking may fail, even though it is detected
var unpacked = P_A_C_K_E_R.unpack(source);
if (unpacked != source) {
source = unpacker_filter(unpacked);
if (Urlencoded.detect(source)) {
source = unpacker_filter(Urlencoded.unpack(source))
if (JavascriptObfuscator.detect(source)) {
source = unpacker_filter(JavascriptObfuscator.unpack(source))
if (MyObfuscate.detect(source)) {
source = unpacker_filter(MyObfuscate.unpack(source))
return trailing_comments + source;
function beautify() {
if (the.beautify_in_progress) return;
the.beautify_in_progress = true;
var source = $('#source').val();
var indent_size = $('#tabsize').val();
var indent_char = indent_size == 1 ? '\t' : ' ';
var preserve_newlines = $('#preserve-newlines').attr('checked');
var keep_array_indentation = $('#keep-array-indentation').attr('checked');
var indent_scripts = $('#indent-scripts').val();
var brace_style = $('#brace-style').val();
var space_before_conditional = $('#space-before-conditional').attr('checked');
var opts = {
indent_size: indent_size,
indent_char: indent_char,
brace_style: brace_style,
space_before_conditional: space_before_conditional,
if (looks_like_html(source)) {
style_html(source, opts)
} else {
if ($('#detect-packers').attr('checked')) {
source = unpacker_filter(source);
var v = js_beautify(source, opts);
the.beautify_in_progress = false;
function looks_like_html(source)
// <foo> - looks like html
// <!--\nalert('foo!');\n--> - doesn't look like html
var trimmed = source.replace(/^[ \t\n\r]+/, '');
var comment_mark = '<!-' + '-';
return (trimmed && (trimmed.substring(0, 1) === '<' && trimmed.substring(0, 4) !== comment_mark));
$(function() {
if ($.browser.msie) {
$('#source').width( $('#textarea-wrap').width() - 10)
.height($('#textarea-wrap').height() - 10);
var default_text = "// This is just a sample script. Paste your real code (javascript or HTML) here.\n\nif ('this_is'==/an_example/){of_beautifer();}else{var a=b?(c%d):e[f];}";
$('#source').val(default_text).bind('click focus', function () {
if ($(this).val() == default_text) {
}).bind('blur', function () {
if ( ! $(this).val()) {
$(window).bind('keydown', function (e) {
if (e.ctrlKey && e.keyCode == 13) {
$('#submit').bind('click', beautify);
$('select').bind('change', beautify);
<div id="beauty">
<button id="submit"><strong>Beautify JavaScript or HTML</strong> <em>(ctrl-enter)</em></button>
<fieldset id="textarea-wrap">
<textarea id="source"></textarea>
<div id="blurb">
<fieldset id="options">
<li><select name="tabsize" id="tabsize">
<option value="1">indent with a tab character</option>
<option value="2">indent with 2 spaces</option>
<option value="3">indent with 3 spaces</option>
<option value="4">indent with 4 spaces</option>
<option value="8">indent with 8 spaces</option>
<li><select id="brace-style">
<option value="collapse">Braces with control statement</option>
<option value="expand">Braces on own line</option>
<option value="end-expand">End braces on own line</option>
<!-- option value="expand-strict">Braces always on own line (not recommended)</option -->
<li style="padding-bottom: 10px">HTML &lt;style&gt;, &lt;script&gt; formatting:<br><select id="indent-scripts">
<option value="keep">Keep indent level of the tag</option>
<option value="normal">Add one indent level</option>
<option value="separate">Separate indentation</option>
<li><input class="checkbox" type="checkbox" id="preserve-newlines" /><label for="preserve-newlines"> Preserve empty lines?</label><br /></li>
<li><input class="checkbox" type="checkbox" id="detect-packers" /><label for="detect-packers"> Detect packers and obfuscators?</label><br /></li>
<li><input class="checkbox" type="checkbox" id="keep-array-indentation" /><label for="keep-array-indentation"> Keep array indentation?</label></li>
<li><input class="checkbox" type="checkbox" id="space-before-conditional" /><label for="space-before-conditional"> Space before conditional: "if(x)" / "if (x)"</li>
<p><strong>Beautify, unpack or deobfuscate JavaScript and HTML, make JSON/JSONP readable, etc.</strong>.</p>
<p>All of the source code is available on the <a href="">github</a>, and we have a command-line version and a python library as well.
<p>JSBeautifier is — and always will be — completely free and open, and your thanks, flattrs and donations are very heartwarming — thank you all so much!
<div style="position: relative; height: 40px">
<form style="position: absolute; left: 3px;" action="" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="TL28UJK2ARCUJ">
<input style="border:0" type="image" src="" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" src="" width="1" height="1">
<p style="position: absolute; left: 120px; top: 1px"><a href="" target="_blank"><img src="" alt="Flattr" /></a></p>
<p>Browser extensions and other uses:</p>
<ul id="uses">
<li>A <a href="javascript:(function(){s=document.getElementsByTagName('SCRIPT');tx='';sr=[];for(i=0;i<s.length;i++){with(s.item(i)){t=text;if(t){tx+=t;}else{sr.push(src)};}};with({document.write('<textarea id=&quot;t&quot;>'+(sr.join(&quot;\n&quot;))+&quot;\n\n-----\n\n&quot;+tx+'</textarea><script src=&quot;;></script><script>with(document.getElementById(&quot;t&quot;)){value=js_beautify(value);with(style){width=&quot;99%&quot;;height=&quot;99%&quot;;borderStyle=&quot;none&quot;;}};</script>');document.close();}})();"><strong>bookmarklet</strong></a> (drag it to your bookmarks) by Ichiro Hiroshi to see all scripts used on the page,</li>
<li style="margin-top: 8px"><strong>Chrome</strong>: <a href="">jsbeautify-for-chrome</a> by Tom Rix,</li>
<li><strong>Chrome</strong>: <a href="">Pretty Beautiful JavaScript</a> by Will McSweeney,</li>
<li style="margin-top: 8px"><strong>Firefox</strong>: <a href="">Javascript deminifier</a> by Ben Murphy,<br>to be used together with the firebug (<a href="">github</a>),</li>
<li style="margin-top: 8px"><strong>Safari</strong>: <a href="">Safari extension</a> by Sandro Padin,</li>
<li style="margin-top: 8px"><strong>Opera</strong>: <a href="">Readable JavaScript</a> (<a href="">github</a>) by Dither,</li>
<li><strong>Opera</strong>: <a href="">Source</a> extension by Deathamns,</li>
<li style="margin-top: 12px"><a style="font-weight: bold" href="">Fiddler</a> proxy: <a href="">JavaScript Formatter addon</a>,
<li><strong>gEdit</strong> <a href="">tips by Fabio Nagao</a>,</li>
<li><strong>Akelpad</strong> <a href="">extension</a> by Infocatcher,</li>
<li>Beautifier in <a style="font-weight: bold" href="">Emacs</a> write-up by Seth Mason,</li>
<li><a style="font-weight:bold" href="">Cloud9</a>, a lovely IDE running in a browser, working in the node/cloud, uses jsbeautifier (<a href="">github</a>),</li>
<li><a style="font-weight:bold" href="">Shrinker</a>, a non-free JavaScript packer for Mac. I&nbsp;haven't used it, so I&nbsp;have no idea if it's any good,</li>
<li><a style="font-weight:bold" href="">REST Console</a>, a request debugging tool for Chrome, beautifies JSON responses (<a href="">github</a>),</li>
<li><a style="font-weight:bold" href="">mitmproxy</a>, a nifty SSL-capable HTTP proxy, provides pretty javascript responses (<a href="">github</a>).</li>
<li class="writeme">Doing anything interesting? Write me to and I'll include your link.</li>
<div id="footer">
<p class="me-me-me">Written by Einar Lielmanis, <a href=""></a></p>
<p class="me-me-me">Python version flourished by <a href="">Stefano Sanfilippo</a>.</p>
<p class="contributors">with a great help of <a href="">Jason&nbsp;Diamond</a>, Patrick&nbsp;Hof, Nochum&nbsp;Sossonko, Andreas&nbsp;Schneider, Dave&nbsp;Vasilevsky, <a href="">Vital&nbsp;Batmanov,</a> Ron&nbsp;Baldwin, Gabriel&nbsp;Harrison, <a href="">Chris&nbsp;J.&nbsp;Shull</a>, <a href="">Mathias Bynens</a> and others.
<p style="text-align:right">
<a href="#" style="color: #ccc; border-bottom: 1px dashed #ccc; text-decoration: none;" onclick="run_tests(); return false;">Run the tests</a>
<pre id="testresults"></pre>
<p id="ie6-go-away" style="display:none">IE6. You must be kidding me.</p>
var _gaq = [['_setAccount', 'UA-7409939-1'], ['_trackPageview']];
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = '//';
s.parentNode.insertBefore(g, s);
}(document, 'script'));