Switch between format and minify at any time; the result updates as you type. Tidy messy HTML, CSS and JavaScript, or shrink it for a faster website. It runs in your browser and is free and private.
How to format or minify code
- Choose Format or Minify.
- Choose the language: HTML, CSS or JavaScript.
- For formatting, pick the indent: 2 spaces, 4 spaces or Tab.
- Paste your code into the input box, or press Example to see how it works.
- Read the result under Formatted, then press Copy.
- Clear empties the input.
What formatting does
Formatting only changes whitespace. CSS gets one declaration per line, rules separated by a blank line and media queries and nested rules indented. JavaScript is re-indented by its braces with one statement per line, while strings, template literals, regular expressions and for (;;) headers are left exactly as written. HTML is indented by nesting, with inline elements kept on the same line as their text so the page renders the same, and inline <script> and <style> blocks are formatted with the JavaScript and CSS formatters.
What minifying does
Minifying removes comments and every space the browser does not need. Comments that start with /*! are kept, since they usually hold a license. JavaScript keeps a line break wherever automatic semicolon insertion depends on one, so code written without semicolons still works. Names are not shortened and no code is rewritten, so the result behaves exactly like the original. In HTML, the contents of pre and textarea are never touched, and whitespace between inline elements is kept as a single space so words do not run together.
Limits worth knowing
The formatter reads code with a real tokenizer rather than search and replace, but it does not fully parse it, so it will not catch every syntax error. When it does find a problem, such as an unclosed string, comment or bracket, it tells you the line. TypeScript, JSX and template languages are not supported. HTML minifying removes the gaps between block elements such as list items; if a layout relies on that whitespace between inline-block items, check it after minifying.
Tips
- Keep your original file. Minified code is hard to read and edit, so minify a copy for publishing.
- Test your page after minifying, especially if the layout depends on spaces between elements.
- Use formatting to read code you did not write, such as a copied snippet or a compressed file.
- Choose the same indent your team uses so changes stay small.
- Compare before and after with the diff checker.
Who uses it
Students learning to read code, freelancers cleaning up a client's site, and small businesses trimming page weight for speed. For JSON files use the JSON tools.
Private by design
Your code is formatted on this page in your browser. Nothing is uploaded, so it is safe for private or unreleased work.
Questions
Will minifying break my code?
It only removes comments and unneeded spaces and does not rewrite your code, so the behaviour stays the same. Always test the result.
Does it support TypeScript or JSX?
No. HTML, CSS and JavaScript are supported.
Why was a comment kept?
Comments that begin with /*! are kept because they usually hold a licence.