Code Formatter
Beautify or minify HTML, CSS, JavaScript, TypeScript and JSON. Powered by Prettier + Terser, loaded only when you click.
About the HTML / CSS / JS Formatter
This is a two-way formatter for HTML, CSS, JavaScript, TypeScript, and JSON. Paste code that arrived on one line, or code you want to shrink before shipping, and get it back readable or compressed. It solves the daily annoyance of minified files you cannot read and hand-written files that are inconsistently indented, without opening an editor or wiring up a build step for a one-off snippet.
Pick a language, paste into the input box, and click Beautify or Minify. Beautify runs Prettier in your browser, and its HTML, CSS, Babel, and TypeScript plugins are imported only after you click, so nothing downloads until you use it. Minify uses Terser for JavaScript and TypeScript, html-minifier-terser for HTML, JSON.parse then JSON.stringify for JSON, and a lightweight regex pass for CSS that strips comments and collapses whitespace.
It is free, needs no signup, and every pass happens on your machine, so your code is never uploaded. The output box shows the character count, the size in KB, and, when minifying shrinks the result, the percentage saved against your input. A Copy button sends the result to your clipboard, and Clear empties both boxes for the next snippet.
How to use the HTML / CSS / JS Formatter
- 1Click one of the language buttons: HTML, CSS, JavaScript, TypeScript, or JSON.
- 2Paste or type your code into the Input box.
- 3Click Beautify to indent and re-space it, or Minify to strip whitespace and comments.
- 4Read the result in the Output box, with its character count, KB size, and any percentage saved shown below.
- 5Click Copy to send the output to your clipboard, or Clear to empty both boxes.
What you can use it for
Read a minified library
You opened a vendor bundle or a copied one-line script and cannot follow it. Set the language to JavaScript, paste it, and click Beautify to get indented code with line breaks you can step through and debug.
Shrink CSS or JSON before shipping
You have a small stylesheet or config blob and no build pipeline. Minify collapses the whitespace and drops comments, and the saved percentage under the output tells you exactly how many bytes you cut.
Clean up pasted config
A JSON payload came back from an API on a single line. Choose JSON and Beautify to expand it into indented structure, or Minify to re-flatten it into one compact line for a request.
Beautify and minify are opposite passes
Beautify parses your code into a syntax tree and prints it back with consistent indentation, spacing, and line breaks. Prettier does this for every language here, so the output ignores how your input was spaced and follows one house style. For JavaScript and TypeScript that style adds semicolons and single quotes; for HTML, CSS, and JSON it is Prettier's default layout. It changes how the code reads, not what it does.
Minify does the reverse and optimizes for bytes. For JavaScript and TypeScript, Terser goes beyond stripping whitespace: it renames local variables to short names and compresses, so the result beats plain whitespace removal. HTML minify collapses whitespace, removes comments, and minifies inline CSS and JavaScript. JSON is compacted by re-serializing without spacing. The saved percentage compares input and output length so you see the trade.
Frequently asked questions
Is my code sent to a server?
No. The Prettier and Terser libraries load into your browser and run there, so your code stays on your device and nothing you paste is uploaded. After the formatter libraries download, formatting and minifying trigger no further network requests, which you can confirm in your browser tools.
Which languages does it handle?
Five, each with its own button: HTML, CSS, JavaScript, TypeScript, and JSON. Both Beautify and Minify work for all five. JavaScript and TypeScript minify with Terser, HTML with html-minifier-terser, JSON is re-serialized, and CSS uses a regex-based whitespace and comment stripper.
Why did my JavaScript come back with single quotes and semicolons?
Beautify for JavaScript and TypeScript is set to always add semicolons and prefer single quotes, so double quotes become single and missing semicolons get inserted. That style is fixed here; there is no options panel to change indent width, quote style, or semicolons.
Why did minifying fail on my JSON?
JSON minify parses your text with JSON.parse before re-serializing it. If the input has a trailing comma, an unquoted key, or another syntax error, the parse throws and you see the error message instead of output. Beautify the JSON first to find the problem, then minify the fixed version.
How thorough is the CSS minifier?
CSS minify is a light pass, not a full parser. It removes comments, collapses whitespace, tightens spacing around braces, colons, semicolons, and combinators, and drops the last semicolon before a closing brace. It does not merge rules or shorten hex colors. There is also no hard size limit; large inputs are bound only by your device's memory.