JS Beautifier is hosted on two CDN services: cdnjs and rawgit.
To pull from one of these services include one set of the script tags below in your document:
Disclaimer: These are free services, so there are no uptime or support guarantees.
Open jsbeautifier.org. Options are available via the UI.
To beautify using python:
$ pip install jsbeautifier$ js-beautify file.js
Beautified output goes to
jsbeautifier as a library is simple:
import jsbeautifierres =res =
...or, to specify some options:
opts =opts.indent_size = 2res =
As an alternative to the Python script, you may install the NPM package
js-beautify. When installed globally, it provides an executable
js-beautify script. As with the Python script, the beautified result is sent to
stdout unless otherwise configured.
$ npm -g install js-beautify$ js-beautify foo.js
You can also use
js-beautify as a
node library (install locally, the
$ npm install js-beautify
var beautify = js_beautifyfs = ;fs;
These are the command-line flags for both Python and JS scripts:
CLI Options:-f, --file Input file(s) (Pass '-' for stdin)-r, --replace Write output in-place, replacing input-o, --outfile Write output to file (default stdout)--config Path to config file--type [js|css|html] ["js"]-q, --quiet Suppress logging to stdout-h, --help Show this help-v, --version Show the versionBeautifier Options:-s, --indent-size Indentation size -c, --indent-char Indentation character [" "]-t, --indent-with-tabs Indent with tabs, overrides -s and -c-e, --eol Character(s) to use as line terminators.[first newline in file, otherwise "\n]-n, --end-with-newline End output with newline--editorconfig Use EditorConfig to set up the options-l, --indent-level Initial indentation level -p, --preserve-newlines Preserve line-breaks (--no-preserve-newlines disables)-m, --max-preserve-newlines Number of line-breaks to be preserved in one chunk -P, --space-in-paren Add padding spaces within paren, ie. f( a, b )-E, --space-in-empty-paren Add a single space inside empty paren, ie. f( )-j, --jslint-happy Enable jslint-stricter mode-a, --space-after-anon-function Add a space before an anonymous function's parens, ie. function ()-b, --brace-style [collapse|expand|end-expand|none][,preserve-inline] [collapse,preserve-inline]-u, --unindent-chained-methods Don't indent chained method calls-B, --break-chained-methods Break chained method calls across subsequent lines-k, --keep-array-indentation Preserve array indentation-x, --unescape-strings Decode printable characters encoded in xNN notation-w, --wrap-line-length Wrap lines at next opportunity after N characters -X, --e4x Pass E4X xml literals through untouched--good-stuff Warm the cockles of Crockford's heart-C, --comma-first Put commas at the beginning of new line instead of end-O, --operator-position Set operator position (before-newline|after-newline|preserve-newline) [before-newline]
Which correspond to the underscored option keys for both library interfaces
defaults per CLI options
defaults not exposed in the cli
Notice not all defaults are exposed via the CLI. Historically, the Python and
JS APIs have not been 100% identical. For example,
currently JS-only, and not addressable from the CLI script. There are still a
few other additional cases keeping us from 100% API-compatibility.
In addition to CLI arguments, you may pass config to the JS executable via:
jsbeautify_-prefixed environment variables
JSON-formatted file indicated by the
JSONdata at any level of the filesystem above
Configuration sources provided earlier in this stack will override later ones.
Below is an example configuration tree showing all the supported locations
for language override nodes. We'll use
indent_size to discuss how this configuration
would behave, but any number of settings can be inherited or overridden:
Using the above example would have the following result:
indent_sizeof 4 spaces from the top-level setting.
indent_sizeof 1 space.
indent_sizeof 4 spaces from the top-level setting
In addition to the
are also provided as an easy interface into those scripts. Alternatively,
js-beautify --css or
js-beautify --html will accomplish the same thing, respectively.
// Programmatic accessvar beautify_js = ; // also available under "js" exportvar beautify_css = css;var beautify_html = html;// All methods accept two arguments, the string to be beautified, and an options object.
The CSS & HTML beautifiers are much simpler in scope, and possess far fewer options.
CSS Beautifier Options:-s, --indent-size Indentation size -c, --indent-char Indentation character [" "]-t, --indent-with-tabs Indent with tabs, overrides -s and -c-e, --eol Character(s) to use as line terminators. (default newline - "\\n")-n, --end-with-newline End output with newline-L, --selector-separator-newline Add a newline between multiple selectors-N, --newline-between-rules Add a newline between CSS rulesHTML Beautifier Options:-s, --indent-size Indentation size -c, --indent-char Indentation character [" "]-t, --indent-with-tabs Indent with tabs, overrides -s and -c-e, --eol Character(s) to use as line terminators. (default newline - "\\n")-n, --end-with-newline End output with newline-p, --preserve-newlines Preserve existing line-breaks (--no-preserve-newlines disables)-m, --max-preserve-newlines Maximum number of line-breaks to be preserved in one chunk -I, --indent-inner-html Indent <head> and <body> sections. Default is false.-b, --brace-style [collapse-preserve-inline|collapse|expand|end-expand|none] ["collapse"]-S, --indent-scripts [keep|separate|normal] ["normal"]-w, --wrap-line-length Maximum characters per line (0 disables) -A, --wrap-attributes Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline] ["auto"]-i, --wrap-attributes-indent-size Indent wrapped attributes to after N characters [indent-size] (ignored if wrap-attributes is "force-aligned")-U, --unformatted List of tags (defaults to inline) that should not be reformatted-T, --content_unformatted List of tags (defaults to pre) that its content should not be reformatted-E, --extra_liners List of tags (defaults to [head,body,/html] that should have an extra newline before them.--editorconfig Use EditorConfig to set up the options
Beautifier for supports directives in comments inside the file. This allows you to tell the beautifier to preserve the formatting of or completely ignore part of a file. The example input below will remain changed after beautification
You are free to use this in any way you want, in case you find this useful or working for you but you must keep the copyright notice and license. (MIT)
Thanks also to Jason Diamond, Patrick Hof, Nochum Sossonko, Andreas Schneider, Dave Vasilevsky, Vital Batmanov, Ron Baldwin, Gabriel Harrison, Chris J. Shull, Mathias Bynens, Vittorio Gambaletta and others.