About this tool
Code arrives minified from a bundle, or messy from a quick paste, and you need it the other way around. This formatter does both: beautify to expand and indent HTML, CSS or JavaScript into something readable, or minify to strip it down for shipping. JavaScript minification is handled by Terser and CSS by CSSO — the same battle-tested tools used in real build pipelines.
Everything runs locally in your browser, so even proprietary code stays on your machine. Pick the language, choose beautify or minify, and copy the result.
Frequently asked questions
What's the difference between beautify and minify?
Beautify adds indentation and line breaks so code is easy to read; minify strips whitespace, comments, and shortens names to make the file as small as possible for production. Use beautify while developing and minify before you ship.
Does minifying change how my code behaves?
It shouldn't — minifiers only rewrite syntax that is provably equivalent (renaming local variables, dropping dead code, etc.). If minified output behaves differently, it usually points to code that relied on whitespace-sensitive quirks or a genuine bug the minifier's parser caught.
Is my code uploaded anywhere?
No. Formatting and minifying both run entirely in your browser using JavaScript libraries (js-beautify, Terser, csso) loaded once and executed locally. Your code never leaves the page.
Which languages does this formatter support?
JavaScript, CSS, and HTML. JS minification uses Terser, CSS minification uses csso, and HTML minification is a lightweight custom pass that preserves the contents of <pre>, <script>, and <style> tags.
Why did I get a syntax error instead of formatted output?
The formatter parses your code before beautifying or minifying it, so a genuine syntax error (an unmatched brace, a stray comma) is reported with a line number instead of silently producing broken output.