Pretty-print and minify HTML and CSS; auto-indent and attribute wrap.

Switch tool

Input · HTML0 chars · 0 lines

Output0 chars · 0 lines

How to use

Purpose

Online HTML and CSS formatter and minifier. Auto-indents nested tags, aligns attributes, organizes CSS rules. HTML mode handles HTML5 void elements, inline SVG, template strings, and Vue/React JSX fragments. CSS mode supports nested media queries, CSS variables, modern selectors, and @layer/@container. Minify mode strips whitespace and comments for production embedding (Email templates, mini-program code, inline strings). Everything runs locally.

Steps

Pick mode: HTML / CSS / auto-detect (looks at first char: < vs {)
Paste or drop a file (.html, .htm, .vue template, .jsx fragment, .css)
Click Format for 2-space indented output with clear nesting
Click Minify to strip whitespace and comments for inline use
HTML5 void elements (br, img, input, meta) follow the spec — no forced />
Nested CSS media queries (@media inside @supports) parse correctly
Errors flagged inline: unclosed tags, mismatched quotes, unbalanced braces
Export as file or copy formatted output

FAQ

Do Vue/React template expressions (e.g. {{ msg }} or {msg}) get broken?: No. The formatter recognizes Vue double-brace, React single-brace, and Angular interpolation — they are preserved as expressions, not parsed as HTML.
Can I format CSS-in-JS (styled-components) template strings?: Partially. Pure CSS strings (no ${} interpolation) format well. With JS interpolation, extract CSS, format separately, then reinsert.
Are <script> and <style> contents formatted along with HTML?: No, JS inside <script> is left as-is to avoid breaking semantics. CSS inside <style> auto-switches to CSS mode. For JS use a dedicated JS formatter.
Why are SVG path d-attributes kept on one line?: Path data is kept single-line by default to avoid syntax issues. If you see newlines, they came from the source — the tool does not add them.
Can I preserve HTML comments?: Format mode keeps all comments. Minify mode drops them by default; enable "preserve comments" to keep license or conditional comments.

Use cases

Clean scraped HTML: pages from scraping or DevTools are single-line; format to analyze DOM
Maintain HTML email templates: inline-style email HTML is fragile; format before testing across clients
Edit SVG from design tools: Figma/Sketch exports are single-line; format to tweak paths
Read mini-program wxml: WeChat mini-program markup is HTML dialect; format to see conditional/list rendering
Refactor legacy CSS: thousand-line single-file CSS becomes navigable after formatting

Use cases

Frontend cleaning scraped HTML, maintaining HTML email templates, editing SVG, reading WeChat mini-program wxml, refactoring legacy CSS. Frontend devs, scrapers, email marketing, mini-program developers. Vue/React template safety, SVG path preservation, and optional comment retention are the differentiators.