HTML, CSS & JS Beautifier
Turn minified or messy HTML, CSS and JavaScript into clean, readable code.
How to use: Paste your code, leave Language on Auto (or choose one), pick the indent, then press Beautify and copy the result.
How to use the HTML, CSS & JS Beautifier
Minified code saves bandwidth but is almost impossible to read. Code copied from a website, an email or an old project is often badly indented too. A beautifier restores structure so you can understand, debug and edit it.
Paste HTML, CSS or JavaScript into the box. Auto-detect looks at the first characters: code starting with a tag is treated as HTML, rule blocks with selectors and properties as CSS, and everything else as JavaScript. Choose the language yourself if the guess is wrong. Pick two spaces, four spaces or tabs for indentation.
For JavaScript, the formatter puts each statement on its own line, indents blocks and object literals, spaces out operators and keeps strings, template literals, regular expressions and comments untouched. For HTML, block elements are nested with indentation while inline elements such as links and bold text stay in the flow of the sentence; contents of pre and textarea are preserved exactly, and script and style blocks are formatted with the JavaScript and CSS engines.
The tool reformats whitespace only; it does not rename variables or change behaviour. Very unusual syntax may not be formatted perfectly, but the code will still work. Everything runs in your browser.
Frequently asked questions
Does beautifying change how my code works?
No. Only spaces, line breaks and indentation change.
Can it format JSON?
Yes, choose JavaScript. For validation and error messages, use the JSON Formatter.
Can it reverse variable names from minified code?
No. Renamed variables cannot be recovered; the formatter only restores layout.