Code Beautifier & Minifier

Code Beautifier takes code that is crammed onto one line, badly indented or copied out of a minified file, and lays it out cleanly with consistent indents, spacing and line breaks. Switch to Minify and it does the reverse for HTML, CSS and JavaScript, stripping comments and spare whitespace so pages load faster, and tells you exactly how many bytes you saved.

It handles HTML, CSS, SCSS, LESS, JavaScript, TypeScript, Markdown and YAML, plus JSON as a quick extra. Paste something and it works out the language on its own. Beautifying uses Prettier, the formatter many professional teams run in their editors, so the layout matches what you would get in a real project. JavaScript minifying uses Terser, the same engine behind most website build tools.

It suits web designers tidying a theme file, developers reading someone else’s minified script, and anyone pasting code into a blog post. Everything runs on your own device, and your code is never sent to a server.

1. Paste your code into “Your code”, press “Open file”, or drop a file onto the box. The language appears next to the Language list; choose one yourself if the guess is wrong.
2. Pick Beautify to tidy it or Minify to shrink it. The result updates as you type.
3. For Beautify, set the indent (2 spaces, 4 spaces or Tab), the line width, quotes, semicolons and trailing commas. For Minify, choose whether to shorten variable names and remove comments.
4. If the status box turns red, read the line and column it gives, then press “Go to the mistake” to jump straight there.
5. Press Copy, or Download to save the result with the right file ending, such as .min.js or -beautified.css.

• Beautify HTML, CSS, SCSS, LESS, JavaScript (including JSX), TypeScript, Markdown, YAML and JSON.
• Minify HTML, CSS, JavaScript and JSON, with the size before and after and the percentage saved.
• Automatic language detection from the code itself, or from the file ending when you open a file.
• Beautify options: 2 spaces, 4 spaces or tabs; line width of 80, 100, 120 or 160; double or single quotes; semicolons on or off; trailing commas everywhere, ES5-style or none.
• JavaScript minifying with Terser’s safe settings, optional shorter variable names, optional removal of console calls, and licence comments (/*! … */) kept by default.
• HTML minifying that leaves <pre> and <textarea> exactly as they are, keeps old Internet Explorer conditional comments, and can minify the CSS and JavaScript inside <style> and <script> tags.
• Syntax errors explained in plain English with the line, column and the broken line marked, plus the original technical message.
• Line numbers, drag-and-drop, and your option choices remembered in this browser.

• The first time you use a language there is a short pause while its formatter loads. After that it is instant, even offline until you close the tab.
• Minify CSS is deliberately cautious: it keeps the space before a colon in selectors, because “div :first-child” and “div:first-child” mean different things, and it never touches spaces inside calc().
• “Remove spaces around blocks” is safe for normal layouts. If you place elements side by side with display: inline-block, untick it so the gaps between them stay.
• Spaces inside elements styled with white-space: pre in your CSS cannot be seen by the HTML minifier, so wrap such text in <pre> if it must keep its spacing.
• TypeScript, SCSS and LESS can be beautified but not minified here. Compile them to JavaScript or CSS first, then minify the result.