Code Minifier & Beautifier

Minify or beautify JavaScript, CSS, and HTML code instantly with size comparison stats.

About This Tool

The Code Minifier & Beautifier is a free browser-based tool that helps developers quickly reduce file sizes or improve the readability of JavaScript, CSS, and HTML code. Whether you need to prepare assets for production deployment or untangle a compressed file for debugging, this tool handles both directions effortlessly.

Minification strips unnecessary characters from source code without changing its functionality. Comments, extra whitespace, line breaks, and redundant formatting are removed, producing a compact output that loads faster over the network. Even modest reductions of 30-60% can make a noticeable difference for page load times, especially on mobile connections where every kilobyte matters.

Beautification is the reverse process: it takes compressed or poorly formatted code and restores clean indentation, consistent spacing, and logical line breaks. This is invaluable when inspecting minified vendor scripts, reviewing build output, or reformatting legacy code before editing. The tool supports configurable indentation (2 or 4 spaces) so you can match your project's style guide.

All processing happens entirely in your browser. Your code is never uploaded to a server, making this tool safe for proprietary source code, API keys embedded in configuration files, and any other sensitive material. The size comparison display shows the original and output sizes in bytes alongside the percentage change, giving you immediate feedback on the effectiveness of the transformation.

How to Use

  1. Select the language tab: JavaScript, CSS, or HTML.
  2. Choose the mode: click Minify to compress code or Beautify to format it.
  3. Paste or type your code into the Input panel. The output updates automatically.
  4. In Beautify mode, toggle between 2-space and 4-space indentation using the badges.
  5. Review the size comparison bar to see the original size, result size, and percentage change.
  6. Click Copy to copy the output to your clipboard, or Clear to reset both panels.
  7. Use the Sample button to load example code for the selected language.
  8. Keyboard shortcut: Ctrl+Shift+C to copy output.

Popular Code Minification Examples

View all code minification examples →

FAQ

Is my code safe when using this tool?

Yes. All minification and beautification is performed entirely in your browser using client-side JavaScript. No code is sent to any server, logged, or stored. You can safely process proprietary source code, configuration files, and any other sensitive material.

How much can minification reduce my file size?

Results vary depending on the original formatting. Well-commented and nicely indented code typically sees a 30-60% reduction. CSS tends to compress more than JavaScript because of the repetitive syntax. For maximum savings, combine minification with gzip or Brotli compression on your server.

Does the minifier change my code's behavior?

The minifier performs conservative transformations: removing comments, collapsing whitespace, and eliminating unnecessary characters. It does not rename variables, remove dead code, or perform advanced optimizations like tree-shaking. Your code should behave identically after minification.

What beautification library is used?

The beautifier uses js-beautify, a widely adopted open-source library that supports JavaScript, CSS, and HTML. It handles edge cases like template literals, nested selectors, and inline scripts within HTML.

Can I use this for production-ready minification?

This tool is great for quick one-off minification and inspecting size savings. For production builds, consider using dedicated build-tool integrations like Terser (JavaScript), cssnano (CSS), or html-minifier-terser (HTML), which perform deeper optimizations such as variable renaming, dead code elimination, and scope hoisting.

Related Tools