⚡ HTML, CSS & JSON Code Minifier & Formatter

Minify and beautify HTML, CSS, and JSON code client-side. Reduce file payload size, strip whitespace, and improve website loading speed.

✓ Free✓ No Signup Required✓ Browser-Based

Input

What HTML, CSS & JSON Code Minifier & Formatter Does

Minifying strips everything a machine does not need — comments, indentation, line breaks, redundant characters — and leaves behavior unchanged. Formatting does the reverse, putting structure back so a person can read it. Both are useful and they are opposite operations on the same file.

How much you save depends entirely on how much whitespace was there. Heavily commented, deeply indented source can lose 30% or more; already-compact code loses almost nothing. And over the wire, gzip or Brotli is doing most of the work anyway — compression is extremely good at repeated whitespace, so minifying a file that is already being compressed typically saves far less than the raw byte count suggests.

The transforms here are conservative and text-level. They will not rename variables, drop unreachable branches or restructure anything, because doing that safely requires parsing the language properly. For a build pipeline, use esbuild, terser or lightningcss, which do parse it and can go considerably further.

What conservative means in practice: the contents of pre, textarea, script and style are lifted out before HTML is touched, whitespace between inline elements is preserved because it is a real word gap, and CSS strings and url() values are protected before any comment or whitespace pass runs over them. Naive minifiers get all four of those wrong and silently corrupt the output.

How to Use HTML, CSS & JSON Code Minifier & Formatter

Select code language (JSON, CSS, or HTML)
Paste your source code into the editor
Click Minify Code to compress or Format / Beautify to format with clean indentations

Formula Used by HTML, CSS & JSON Code Minifier & Formatter

Savings, and why the compressed figure is the one that matters

saving % = (original − minified) ÷ original × 100

original: byte length of the input, UTF-8
minified: byte length after the transform

Worked example

A 40 KB stylesheet that minifies to 28 KB.

Saved: 40 − 28 = 12 KB
Percentage: 12 ÷ 40 × 100

Result: 30% smaller uncompressed — but gzip already removed most of that whitespace, so the transferred saving is usually a small fraction of it.

What each mode does

Language	Minify	Format
JSON	Parses and re-serializes with no whitespace — invalid JSON is rejected rather than mangled	Re-serializes with two-space indentation
CSS	Removes comments and whitespace, collapses separators, drops leading zeros and the final semicolon in each block	Rebuilds indentation, one declaration per line, one selector per line
HTML	Removes comments and collapses whitespace, preserving pre, textarea, script and style and the gaps between inline elements	Breaks tags onto separate lines

What a naive minifier breaks

Each of these is a real failure mode, guarded against here.

Input	Naive result	Why it is wrong
`<b>one</b> <i>two</i>`	`<b>one</b><i>two</i>`	Renders as "onetwo" — that space is a word gap
`<pre> indented</pre>`	`<pre> indented</pre>`	Whitespace in pre is visible content
`content: "a; b"`	`content:"a;b"`	The semicolon was inside a string
`url(a/b/c.png)`	`url(ac.png)`	That was not a comment

How to Read Your Result

Check the compressed size, not the raw one

Serve with gzip or Brotli and measure the transferred bytes. Minification on top of compression is still worth doing, but the honest saving is often a few percent rather than the thirty this tool will report on the raw file.

Never minify your working copy

Minified output is a build artefact. Keep the readable source under version control and generate the compact version as part of the build — otherwise the next change has to be made to unreadable code.

This will not obfuscate anything

Removing whitespace is not protection. Anyone can reformat the output in seconds, and the tool on this page will do it for them. If code needs to stay private, it should not be shipped to the browser.

Limitations & Accuracy Notes

Text-level transforms only. No variable renaming, dead-code removal or restructuring — those need a real parser.
JavaScript minification is not offered, because doing it with regular expressions is unsafe. Use esbuild or terser.
The CSS minifier does not merge rules, reorder declarations or apply vendor-prefix logic.
The HTML minifier does not remove optional closing tags or optional attribute quotes.
The savings figure is uncompressed. Post-compression savings are usually much smaller.
Always test minified output before deploying it. Even conservative transforms can surprise you on unusual input.

Frequently Asked Questions

How does code minification improve website performance?

Minification removes unnecessary whitespace, comments, and redundant characters from source code without altering functionality, reducing bandwidth and TTFB.

Is minification lossless?

Yes, our minifier performs lossless syntactic minification, ensuring identical browser execution and parsing.

What is the difference between minifying and uglifying?

Minifying removes whitespace, comments and other optional characters. Uglifying goes further and rewrites the code — renaming variables to single letters, collapsing expressions — which saves more and makes the output genuinely unreadable.

Does minified code run faster?

Barely. The gain is in transfer size rather than execution speed, and once the file is parsed the engine does not care about formatting. With compression enabled on the server the marginal benefit is smaller than people assume.

Can I get my original code back?

A formatter restores readable indentation but cannot restore comments or original variable names, which are gone permanently. Source maps exist precisely to solve this for debugging, and they have to be generated at build time.

Is it safe to minify any JavaScript?

Mostly, with two classic exceptions: code relying on function names at runtime, and code where automatic semicolon insertion was doing load-bearing work. Both break silently, which is why minified output should be tested rather than assumed equivalent.

Should I minify CSS too?

Yes, and it is lower risk than JavaScript since CSS has no equivalent gotchas. The savings are proportionally similar.

Is my code uploaded?

No. Processing runs in your browser, which matters for anything proprietary.

References & Further Reading

MDN — minification — What minification is and where it sits in a build
esbuild — A fast parser-based minifier for JavaScript and CSS, for when you need more than text transforms

By OnlineToolHubs Team • September 2026