Name: Code Beautifier
Author: Disco Volante Labs

About the Code Beautifier

Beautifies and minifies HTML, CSS, JavaScript, XML, and SQL, in your browser. Paste code or open a file, choose Beautify or Minify, and copy or download the result; it updates as you type.

Every Setting

Language: Auto-Detect reads the code and says what it found under the buttons: markup is HTML or XML, a statement starting with SELECT or CREATE is SQL, rules in braces are CSS, and the rest is JavaScript. Pick the language yourself when a snippet is ambiguous. For JSON, use the JSON Formatter, which also checks it. The rail shows only the settings for the language and action you have.
Beautify or Minify: Beautify lays code out with consistent indentation and line breaks. Minify makes the smallest file that does the same thing: JavaScript is rewritten by a real compressor, which also reports syntax errors with their line, and CSS, HTML, XML, and SQL lose their comments and the spaces nothing reads. Whitespace inside pre and textarea always stays.
Indent, Blank Lines, and Wrap At: Two spaces, four, or tabs. Blank Lines keeps up to one or two of the empty lines you had in a row, or with Remove, leaves no empty lines at all, including the ones HTML usually gets before head and body. Wrap At breaks long HTML and JavaScript lines at 80, 100, or 120 characters, or never. End With a Newline adds the final line break many editors expect.
JavaScript: Braces on the same line as the statement or on the next one. Break Method Chains puts each .then() or .map() on its own line. Spaces Inside Parentheses writes f( a ) instead of f(a).
CSS: Braces on the same line as the selector or on the next one. Each Selector on Its Own Line splits a, b onto two lines. Blank Line Between Rules spaces rules apart. Spaces Around > + ~ writes a > b instead of a>b.
HTML: Attributes as they fit, or one per line. Indent Inside head and body indents their contents a level. Format Scripts and Styles lays out the code inside script and style tags by the JavaScript and CSS settings; off leaves it as written.
XML: Attributes on one line, or one per line for elements with several. Self-Close Empty Elements writes <item/> rather than <item></item>. Keep Comments keeps them in both Beautify and Minify. XML must be well formed; an error points at the line.
SQL: The dialect decides which keywords, quotes, and operators the formatter knows, from standard SQL to PostgreSQL, MySQL, SQL Server, and BigQuery. Keywords and data types, and separately function names, can come out in upper case, lower case, or as written. Tabular lines clauses up in a column; AND / OR puts those words at the start or end of a line; the semicolon can sit on its own line.
Minify Options: Shorten Names renames local variables and parameters to single letters, the biggest saving; top-level names stay, so nothing outside the file breaks. Remove console Calls drops logging. For HTML, Minify Inline Styles and Minify Inline Scripts shrink the code inside style and script tags too. Keep License Comments keeps comments starting with /*! or marked @license.
Open / Clear: Open reads a file from your computer (you can also drop one on the card), and its extension sets the language. Clear empties both panes.
Examples: Under the input: a small example in each language, one click each, which also switches the language to match so its settings show. While an example is in the box, picking another language swaps in that language’s example; your own code is never replaced. If your code does not read as the language you picked, the error says which language it looks like.
Copy / Download: Copy puts the result on the clipboard. Download saves it with the right extension, and minified files get .min in the name.
Pane Divider: Drag the bar between the panes to deal the width; it remembers your split, and double-clicking resets it.

Common Questions

Does minifying change what my code does?: It should not. The JavaScript compressor only makes changes that keep behavior, and the CSS, HTML, and SQL minifiers only remove comments and spaces. Test the minified file before you ship it all the same.
Can it fix broken code?: Beautify lays out what is there, so it can make a missing brace easier to spot, but it does not add one. JavaScript minify and XML beautify stop at the first error and name its line.