Format HTML, CSS and JavaScript with two-space indentation, preview CSS live, and minify CSS or JavaScript by stripping comments and extra whitespace offline.
Part of our Developer Tools collection — Explore more Developer Tools tools · See also: JSON Formatter, Base64 Encode / Decode.
Quick answer: Code Formatter & Minifier — Format HTML, minify CSS & JS Free, no signup, runs in your browser. See below for the interactive tool, 4-step guide and FAQs.
Format CSS with brace-based indentation (2 spaces) or minify by collapsing whitespace. Comments are preserved on beautify.
Format JavaScript with brace-based indentation (2 spaces) or minify by collapsing whitespace. Strings and comments are preserved on beautify. Max input 500KB.
Reviewed by the Tool4SaaS Editorial Team — In-house reviewers who build and test every tool locally for accuracy across current Chrome, Edge, Firefox, and Safari. Last updated: . See our authors, methodology or contact us.
HTML, CSS and JavaScript can be formatted, but only CSS and JavaScript can be minified. The HTML view indents nested tags and keeps inline spans joined; the CSS view expands rules and previews them live; the JS view restores two-space indentation and compacts code up to 500KB. Minification strips comments and collapses whitespace, so keep a readable original.
No. Every view runs in your browser, JavaScript input is capped at 500KB, and closing the tab discards the pasted source. Keep an original copy regardless: compact output is hard to edit by hand and drops the comments you may want to restore later.
Reductions land between twenty and fifty percent depending on how comment-heavy and how deeply indented the source was. A 12.4KB file can drop to 8.1KB, and a 200-character snippet can fall to 120 characters. Trial the compact build in staging before shipping it to production.
Format, also called beautify, adds line breaks and two-space indentation so you can read and review code. Minify does the opposite: it strips comments, blank lines and repeated spaces, then collapses structure, producing the smallest valid text for the wire. Keep the readable version in source control and minify at build time.
Yes. The CSS view injects your stylesheet into a small sandbox with .container, .item, .box and .text sample elements, so matching selectors restyle the preview live. It is a quick check for selector mistakes, not a screenshot of your real page; confirm final rendering in the target browser.
Three linked views cover markup and styles. HTML indents nested tags while leaving inline spans joined; CSS expands rules by braces and semicolons with a live preview you can restyle; JS restores two-space indentation and brace placement for compressed bundles. CSS and JavaScript can also minify, stripping comments and collapsing redundant whitespace; HTML is beautify-only. Example: paste a minified .container rule, press Format to read four lines, then Minify to confirm it returns to one compact line. A 12.4KB stylesheet with remarks typically lands near 8.1KB, about thirty-five percent lighter, which matters for first paint on marketing pages and dashboards.
HTML breaks on block tags such as div, ul and table at two spaces per tier while void elements like img and br stay single lines. CSS splits on braces and semicolons and preserves the spacing calc needs. JS protects string and template literals before reformatting, so braces inside quotes never skew indentation. Reference behavior table: block tags break | inline tags stay joined | void tags single line | open brace indents | close brace outdents | comments strip in CSS/JS minify | strings preserved exactly | duplicate properties keep the last value. Edge case: a missing closing brace or semicolon lets indentation drift, which flags the fault for repair rather than corrupting wording. Minify saves twenty to fifty percent on comment-heavy sources; keep originals because compact text resists direct editing.
Paste a 12.4KB minified stylesheet, press Format to review each rule on its own line, and watch the preview restyle when selectors like .item match the sample elements. Switch to the JS view, paste a compressed function, and Format to expose nesting before debugging. Minify both to confirm the byte drop, copy into your build, and diff against the original so nothing changed but whitespace. Limitation: these are formatters, not compilers, so they will not catch type errors or resolve imports, and malformed code may indent oddly and needs a linter. For JSON, XML and SQL payloads, use their dedicated formatters instead.