Code Formatter & Minifier

What is Code Formatter & Minifier?

A free online code formatter and minifier that beautifies or minifies HTML, CSS, and JavaScript without ever leaving your browser. Pick the language, then choose Beautify to re-indent messy or one-line source with 2-space, 4-space, or tab indentation, or Minify to compress it. Beautifying is powered by js-beautify; JavaScript minification uses Terser to mangle and shrink the code, while CSS and HTML are compacted by stripping comments and collapsing redundant whitespace. Web developers reach for it to tidy up minified vendor code so it's readable, to shrink stylesheets and scripts before deploying, and to clean up snippets pasted from build output.

How to use Code Formatter & Minifier

1. Choose the language of your source: HTML, CSS, or JS.
2. Pick the action: Beautify to pretty-print, or Minify to compress.
3. For Beautify, pick the indentation: 2 spaces, 4 spaces, or Tab.
4. Paste or type your code into the Input box - the output updates automatically.
5. Use the Copy button to grab the result, or click Clear to empty the input and start over.

Examples

a{color:red;font-weight:bold}

a {
  color: red;
  font-weight: bold
}

function add(first, second) {
  return first + second;
}

function add(n,d){return n+d}

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

<ul><li>One</li><li>Two</li></ul>

Frequently asked questions

Is my code uploaded to a server?

No. Beautifying and minifying all happen locally in your browser - js-beautify and Terser are loaded as scripts and run on your device. Your code never leaves your machine, and the tool keeps working offline.

Which languages and actions are supported?

Three languages - HTML, CSS, and JavaScript - each with two actions: Beautify (pretty-print with your chosen indentation) and Minify (compress). JavaScript is minified with Terser, while CSS and HTML are compacted by removing comments and collapsing whitespace.

What indentation can I choose?

When beautifying you can re-indent with 2 spaces, 4 spaces, or a Tab character. Indentation only applies to Beautify; Minify removes whitespace and ignores the setting.

Why did minifying my JavaScript show an error?

Terser parses your JavaScript before minifying, so a syntax error stops it and the message is shown above the output. Fix the reported spot - often an unclosed bracket, string, or a stray token - and the result rebuilds automatically.

Does the output update on its own?

Yes. The result rebuilds whenever you change the input, language, action, or indentation, so you never have to press a button to format - just copy the output when it looks right.