HTML, CSS & JS Minifier and Beautifier
Minify or beautify HTML, CSS and JavaScript in your browser. Runs in your browser.
About this html, css & js minifier and beautifier
This tool minifies HTML, CSS and JavaScript to make files smaller, and beautifies minified code so you can read it again. It runs in your browser, shows how many bytes you saved before and after gzip, and points to any syntax error by line and column.
Pick a language, paste your code or open a file, and choose Minify or Beautify. The result updates as you type. The built-in HTML sample, for example, goes from 1,000 bytes to 666, about 33% smaller, and the inline CSS and script inside it are minified too.
Nothing is uploaded. There is no save button that creates a public link, which matters because pasted code often carries API keys, internal URLs and unreleased features.
Features
Three languages, both directions
Minify or beautify HTML, CSS and JavaScript on one page. Opening a file picks the language from its extension, and a pasted snippet that looks like another language gets a one-click switch.
Errors with a line and column
If your JavaScript has a syntax error, you get the message, the line and the column, plus a button that selects that spot in the input. The tool never hands you broken output.
Careful HTML minifying
Text inside <pre>, <textarea> and <title> stays exactly as written. So does a non-breaking space. Conditional comments survive, and JSON-LD blocks are minified as JSON.
Inline CSS and JS too
Inside an HTML file, <style> blocks, style attributes and <script> blocks are minified with the same engines used for standalone files. If one block fails to parse, it is kept as it was and reported with its line in the HTML.
Honest size numbers
See the original size, the result size, the percentage saved and a gzip estimate for both, so you know what actually changes on the wire.
JavaScript options that matter
Shorten variable names, compress code, strip console calls, treat the file as an ES module, and keep license comments that start with /*! or contain @license.
Readable beautifier
Beautify with 2 spaces, 4 spaces or tabs, wrap long lines at 80 or 120 characters, choose a brace style and keep or drop blank lines.
How to use the html, css & js minifier and beautifier
- 1Pick HTML, CSS or JavaScript, then paste code or open a file.
- 2Choose Minify or Beautify and set the options. The result updates as you type.
- 3Check the size saved and any errors, then copy or download the file.
When to use it
Hotfix without a build step
You changed one script on a static site or a CMS theme and have no bundler set up. Minify it here and upload the .min.js file.
Reading someone else's minified file
A vendor script throws an error on line 1, column 48,213. Beautify it to get real lines and find the function that breaks.
Shrinking an email template
Some email clients clip messages over about 100 KB. Minify the HTML and its inline CSS to stay under the limit without touching the layout.
Checking a snippet before you ship it
Paste a script to catch a missing bracket or stray comma. The parser reports the exact position before your users find it.
What does minifying actually remove?
Minifying deletes everything a browser does not need: comments, indentation, line breaks and spaces between tokens. For JavaScript it goes further. Local variable names become single letters, dead code disappears and short expressions replace long ones, so `if (a) { return b; } else { return c; }` turns into `return a?b:c`.
For CSS, the optimizer also shortens values. `#ff0000` becomes `red`, `0px` becomes `0`, and rules with identical selectors can be merged. For HTML, runs of whitespace collapse to a single space, and spaces next to block tags such as <div> and <li> are dropped, because browsers ignore them there anyway.
Is gzip enough, or should I minify too?
Do both. Gzip (RFC 1952) and Brotli (RFC 7932) compress repeated text very well, so whitespace costs less than it looks. Minifying still helps, because shorter names and removed comments are savings compression cannot find. In the JavaScript sample here, minifying cuts 626 bytes to 425 before any compression.
The gzip tile shows both sides of that story. If the gzip size barely moves, your server compression was already doing most of the work, and the main remaining gain is faster parsing in the browser.
When can minifying break a page?
Valid code keeps working. Problems come from code that depends on details a minifier is allowed to change. Watch for these:
- CSS that sets white-space: pre on an element other than <pre>. Turn off Collapse whitespace for that file.
- Inline-block layouts that rely on the space between two elements. Turn off Trim around block tags if a gap disappears.
- Scripts that read a function's name at runtime. Turn off Shorten variable names.
- ES module syntax in a classic script tag. Turn on ES module only for files loaded with type="module", since it also renames top-level names.
- Invalid CSS. The CSS optimizer drops rules it cannot parse, and this tool lists each one so you can fix it.
Why use Mavros
| Mavros | Typical upload sites | |
|---|---|---|
| Where your code goes | Stays in your browser | Sent to a server, sometimes saved behind a share link |
| Languages | HTML, CSS and JS, minify and beautify, one page | One page per language and direction |
| Syntax errors | Message, line, column and Go to line | Blank output or a generic failure |
| Size report | Bytes, percent saved and gzip before and after | Often none |
| Inline CSS and JS in HTML | Minified, with problems reported per block | Often skipped or broken |
| <pre> and <textarea> content | Never changed | Sometimes collapsed |
Tips
- Keep the original, readable file in your project and treat the .min file as build output. Never edit minified code by hand.
- Leave Keep license comments on for third-party code. Most open-source licenses ask you to keep the notice.
- Minifying does nothing for images, which are usually the biggest files on a page. Compress your images and clean up SVG icons as well.
- Try your minified page in the HTML playground before you upload it.
- Working with API data instead of code? Use the JSON formatter to pretty-print or minify it.
Questions
Will minifying break my code?
No, not if the code is valid. The JavaScript minifier parses your code first and stops with a line and column if it finds an error. Edge cases such as white-space: pre on custom elements have their own switches.
How much smaller will my files get?
It depends on how much whitespace, comments and long names the file has. The samples here shrink by 28% (CSS), 33% (HTML) and 32% (JavaScript). The tool shows your exact numbers and the gzip estimate.
Can I unminify JavaScript?
Yes. Switch to Beautify to restore indentation and line breaks. Original variable names and comments cannot come back, because minifying removed them. A source map from the original build is the only way to get those.
Why did one of my CSS rules disappear?
The rule had a syntax error, such as a missing colon, so the optimizer dropped it. The tool lists every such error with its line and column. Fix the rule and it comes back.
What does Keep license comments do?
It keeps comments that start with /*! and removes all others. In JavaScript it also keeps comments that contain @license or @preserve. Libraries mark their copyright notice this way so it survives minifying.
Does it minify the CSS and JavaScript inside an HTML file?
Yes. Inline <style> blocks, style attributes and <script> blocks are minified. Scripts with a JSON type are compacted as JSON, and unknown script types such as templates are left alone.
What is the difference between minifying and gzip?
Minifying rewrites the code into a shorter equivalent. Gzip compresses the bytes for transfer, and the browser unpacks them. They stack: servers usually gzip or Brotli-compress files that were already minified.
Is my code uploaded anywhere?
No. Minifying, beautifying and the gzip estimate all run in your browser. Nothing is sent to a server and there is no share link, so private code stays private.