homedeveloper toolscode beautifier & minifier

Code Beautifier & Minifier

Beautify or minify HTML, CSS and JavaScript and see how many bytes you save

347 B
Before
347 B
After
n/a
Saved
n/a

Runs entirely in your browser. Nothing you type or upload is sent to us or stored.

Results are for general guidance. Please check anything important before relying on it. Terms of use

How to Use

  1. Choose the language: HTML, CSS or JavaScript. If the code you paste looks like a different language, the tool offers to switch.
  2. Paste your code into the left box, tap Open file to load a .html, .css or .js file (the language is picked from the file name), or tap Sample to try it.
  3. Pick Beautify to indent messy or one-line code (choose 2 spaces, 4 spaces or tabs), or Minify to make it as small as possible for your website.
  4. Check the Before, After and Saved sizes. If the code has a syntax error, the message shows the line and column; tap Show in input to jump there.
  5. Tap Copy or Download to save the result as a .html, .css or .js file.

Beautify vs minify

Beautifying (also called pretty-printing or formatting) adds line breaks and consistent indentation so that people can read the code. It is useful when you copy code from a website's "view source", receive a one-line file, or inherit a project with mixed tabs and spaces. Minifying does the opposite: it removes everything the browser doesn't need, such as comments, indentation and long local variable names, so the file downloads faster. Neither changes what the code does.

Smaller files matter in India, where many visitors browse on mobile data and mid-range phones. Every kilobyte saved in CSS and JavaScript helps the page appear sooner, which also feeds into Google's Core Web Vitals.

Worked example

This 134-byte JavaScript function:

// Add GST to a price
function priceWithGst(amount, ratePercent) {
  const gst = amount * ratePercent / 100;
  return amount + gst;
}

minifies to 44 bytes, about a third of its size: the comment goes, spaces disappear, and the parameter names become single letters because nothing outside the function can see them. The function name stays, because other code may call it.

function priceWithGst(t,i){return t+t*i/100}

Terser even simplified the body by putting the calculation straight into the return.

How each language is minified

LanguageWhat is removedWhat is always kept
JavaScript (Terser)Comments, whitespace, dead code; local names shortenedGlobal names, exports, /*! … */ and @license comments
CSSComments, whitespace, the last ; in each blockStrings, url(…), /*! … */ comments, spaces that matter (div :hover, and (, calc(a + b))
HTMLComments, repeated spaces and line breaks, spaces next to block tagsContents of <pre>, <textarea>, <script> and <style>, attribute values, IE conditional comments, one space between inline elements

The CSS and HTML minifiers are deliberately cautious. They don't rewrite colours, merge rules or remove attribute quotes, which saves a few more bytes in other tools but can break edge cases. In HTML, whitespace between block-level tags such as <div>, <p> and <li> is removed, as most minifiers do; if your CSS makes those elements inline-block, the small gaps between them will close up, so check the layout.

Tips

  • Keep your readable source files in your project and minify only the copy you deploy. Build tools such as Vite, webpack and Next.js minify automatically; this tool is handy for one-off files, WordPress snippets, email templates and quick checks.
  • Servers usually also compress files with gzip or Brotli. Minifying first still helps, because compression can't remove comments or shorten names.
  • If minifying JavaScript reports an error, the original code has a syntax mistake; the line and column point to it.
  • Your code never leaves your browser, so it is safe to paste private or client code.

Frequently Asked Questions

No. Minifying removes comments, extra spaces and line breaks, and in JavaScript shortens local variable names that no other code can see. Global names, exported names, strings and the logic stay the same, so the code behaves exactly as before.

It depends on the file. Code with many comments, long variable names and deep indentation shrinks the most; code that is already compact shrinks very little. The tool shows the exact size before and after and the percentage saved, so you can see the gain for your own file.

Yes. Paste the minified code, choose JavaScript and Beautify, and it will be indented and split into readable lines. Comments that were removed and the original variable names cannot be recovered, though, because they are no longer in the file.

HTML minify removes whitespace next to block-level tags such as div, p and li. If your CSS displays those elements as inline-block, the spaces between them used to create small gaps, and those gaps disappear. Add a margin in CSS instead of relying on whitespace.

All three work; what matters is that a project uses one style consistently. 2 spaces is the most common choice for HTML, CSS and JavaScript today, while 4 spaces is common in older projects. Tabs let each developer set their own width in the editor.