HTML, CSS & JavaScript Formatter

What is the HTML, CSS & JavaScript Formatter?

The Formatter re-indents and cleans up HTML, CSS and JavaScript so it is readable: consistent indentation, one declaration per line, closing tags aligned, long lines broken sensibly. Paste minified code from a live site, a plugin’s output, or a colleague’s file with tabs and spaces mixed, choose the language, and get a tidy version back. It can also go the other way and minify. Everything runs in the browser using standard beautifier libraries; nothing is uploaded.

How to use it

1. Select HTML, CSS or JavaScript.
2. Paste your code.
3. Choose indentation: 2 spaces, 4 spaces or tabs.
4. Click Format. Or click Minify for the compact version.
5. Copy or download the result.

Features

• Three languages with rules specific to each: HTML keeps inline elements inline, CSS orders braces and semicolons, JavaScript respects strings, regexes and template literals.
• Indent control to match your project’s style.
• Format and minify in the same place.
• Handles large files; a whole page of HTML formats in well under a second.
• Private: proprietary code stays on your machine.

Why formatting matters

Readable code is faster to debug and safer to change. A missing closing div is obvious when the indentation stops matching, and invisible when everything is on one line. Consistent style also keeps diffs small in version control, so reviewers see the real change instead of whitespace noise. For teams, the fix is a formatter that runs automatically on save or commit; this tool is for the one-off cases: inspecting minified production code, cleaning code pasted from a CMS, or tidying a snippet before you share it. When to use which, and how to set up Prettier or an editor formatter so you rarely need to do it by hand, is in how to format HTML, CSS and JavaScript you didn’t write.

Things to check after formatting

• Inline scripts and styles inside HTML are formatted too; confirm nothing depended on exact whitespace (pre blocks are preserved).
• JavaScript that relied on automatic semicolon insertion is safer after formatting, not less safe, but confirm the output runs.
• Minified output is functionally identical; only whitespace and comments are removed.

Related tools

Shrink files for production with the Code Minifier, validate and pretty-print API responses with the JSON Formatter, and test patterns with the Regex Tester.

Frequently asked questions

Does formatting change how the code behaves?

No. Only whitespace, line breaks and indentation change.

Can it format TypeScript, SCSS or JSX?

Plain JavaScript and CSS only. TypeScript types and JSX tags may format oddly; use your editor’s formatter for those.

Is there a size limit?

No hard limit. Files over a few megabytes take a second or two.

Is my code stored?

No. Processing is in the browser and nothing is sent to a server.