How to beautify code
- Choose CSS, HTML or JavaScript.
- Paste minified, compressed or badly indented code.
- Choose 2 spaces, 4 spaces or tabs and press Format.
- Copy the result or download it as a file.
What the beautifier does
Minified code is great for production but impossible to read. A beautifier re-indents it and puts each rule, tag or statement on its own line, so you can understand a third-party script, debug a stylesheet from a live site, review a generated HTML email or tidy code copied from a chat message. It changes only whitespace and line breaks, never the behaviour of the code.
This tool uses js-beautify, a long-established open-source formatter used in many editors. For CSS it puts every declaration on its own line and indents nested media queries. For HTML it indents nested elements, keeps inline elements on the same line and also formats embedded <style> and <script> blocks. For JavaScript it adds consistent spacing around operators and braces and keeps up to two existing blank lines.
Beautifying cannot restore what minification removed: comments are gone and shortened variable names such as a and b stay short. If a site publishes source maps, those give you the original code.
Privacy
The formatter library is downloaded once, and your code is formatted locally in your browser. Nothing you paste is uploaded.
Is beautifying the same as linting?
No. A beautifier only fixes layout. A linter such as ESLint or Stylelint also finds bugs and style problems. Prettier is another popular formatter with stricter, opinionated rules.
Will formatting change how my page works?
For CSS and JavaScript, no. In HTML, adding whitespace between inline elements can add a visible space in rare cases, such as between inline-block buttons.
Can it format JSON?
Use the JSON Formatter instead, which also validates the JSON and points to errors.