Code Formatter & Minifier

Beautify or minify HTML, CSS, JavaScript and SQL snippets with two-space indentation, right in your browser, then copy the result.

HTML Formatter

Input Code

Formatted Output

Input Length: 0 Output Length: 0 Lines: 0 Ratio: -

What this formatter is good for

Minified or copied-from-somewhere code is hard to read: a whole stylesheet on one line, an HTML fragment with no indentation, a SQL query pasted from a log. This page gives such snippets a quick, readable layout, or squeezes them back onto as few lines as possible. It has four tabs, HTML, CSS, JavaScript and SQL, each with its own Format / Beautify and Minify rules. Output always uses two-space indentation. It is meant for quick clean-ups of snippets you want to read, review or paste into a message, not as a replacement for the formatter or build tool in your project.

How to use it

Pick a language tab. Switching tabs clears both boxes, so choose the tab before pasting.

Paste code into Input Code, or click Sample to load an example for that language.

Click Format / Beautify for an indented version, or Minify for a compact one. The result appears in Formatted Output.

Check the stats bar: input and output length in characters, the number of output lines, and Ratio, which is output length as a percentage of input length (below 100% means the code got smaller).

Click Copy Output to copy the result, or Clear to start again.

How each formatter works

All four formatters are small hand-written routines that run in your browser. They work on characters and patterns rather than a full parser for each language, which keeps them fast and dependency-free but also means they do not validate your code.

HTML. Whitespace between tags is removed, the markup is split into tags and text, and every tag goes on its own line. Opening tags increase the indent, closing tags decrease it, and void elements such as br, img, input and meta keep it level. Minify removes line breaks and whitespace between tags and collapses repeated spaces.

CSS. Existing line breaks are collapsed, then a new line starts after every {, ; and }, with declarations indented inside their block. Minify also strips /* */ comments, spaces around braces, colons, commas and semicolons, and the last semicolon before each }.

JavaScript. Line breaks are collapsed, then statements are split at ;, { and }. Quoted strings and template literals are copied untouched, and regular-expression literals are detected so that a / inside them is not misread. Minify removes comments and whitespace around punctuation and operators.

SQL. Common keywords and aggregate functions (SELECT, FROM, JOIN, GROUP BY, COUNT, SUM and others) are upper-cased, each major clause starts a new line, and AND, OR, ON and JOIN lines are indented. Minify joins everything into one line.

Known limitations

Always review the output before using it, and keep your original. These routines can change the meaning of code in the cases below.

JavaScript formatting joins all lines first, so code that relies on automatic semicolon insertion (no semicolons at line ends) and // line comments do not survive formatting well. Use semicolons and /* */ comments, or a real formatter such as Prettier.

JavaScript minify is not string-aware: text inside quotes can lose spaces around symbols, and anything after // on a line is removed, including the rest of a URL such as "https://…". Use a proper minifier like Terser or esbuild for production files.

The CSS formatter breaks lines at every semicolon, including those inside strings and data: URLs. The SQL formatter also upper-cases and splits keywords that appear inside quoted strings, and does not add extra indentation for subqueries.

The HTML formatter re-indents the contents of pre, textarea and script elements, and SVG tags written as <path/> are treated as opening tags, which shifts the indentation.

Frequently asked questions

Is my code uploaded anywhere?

No. Formatting and minifying are plain JavaScript functions on this page. Your code is not sent to a server and is not stored in your browser.

Can I change the indentation to four spaces or tabs?

Not on this page; the formatters always use two spaces. Most editors can convert indentation after you paste the result.

Does it check my code for errors?

No. Invalid code is formatted as best it can be without any warning. A missing brace, for example, simply leaves the indentation off by one level.

Is there a dedicated SQL tool?

Yes. The SQL Formatter page has syntax highlighting and more formatting options for queries; this page's SQL tab is the quick version.