Code Formatter

Beautify or minify HTML, CSS, JS, JSON and more.

Format and minify code in your browser

Paste messy, minified or inconsistently indented code and turn it into clean, readable source with one click, or go the other way and shrink it for production. The formatter supports JavaScript, TypeScript, JSON, HTML, CSS, SCSS, Less, XML, SQL, Markdown and YAML, and runs entirely on your device: nothing is uploaded.

Beautify

Beautify uses Prettier, the formatter behind countless open source projects, so the output matches what your editor or CI would produce with default Prettier settings plus the options you pick: indent size or tabs, line width, quote style and semicolons. SQL is laid out clause by clause with your chosen dialect and keyword case. JSON can be sorted alphabetically by key, which makes two versions easy to compare. XML is re-indented while comments and CDATA sections are kept.

Minify

  • JavaScript: Terser removes whitespace and comments, shortens local variable names and simplifies code, usually saving 40 to 70 percent.
  • CSS: comments and whitespace are removed; licence comments that start with /*! are kept.
  • HTML: comments and extra whitespace between tags are removed, while pre, textarea, script and style contents stay safe. Inline styles and scripts are minified too.
  • JSON, XML and SQL: reduced to a single compact line without changing any values.

Tips

If formatting fails, the error shows the line and column where the parser stopped, which is often the quickest way to find a missing bracket or quote. Open a file directly to pick the language from its extension, and use "Use as input" to chain steps, for example to minify code you have just formatted. The size counters show how many bytes minifying saved.

Frequently asked questions

Is my code uploaded anywhere?

No. Formatting and minifying run in your browser with JavaScript libraries that load into the page. Your code never leaves your device, so it is safe to format private or unreleased code.

Which formatter is used?

Prettier, the opinionated formatter used by most JavaScript projects, for JavaScript, TypeScript, HTML, CSS, SCSS, Less, Markdown and YAML. SQL uses sql-formatter with dialects for MySQL, PostgreSQL, SQL Server and more. JSON and XML use the browser's built-in parsers.

Why does formatting fail with an error?

A formatter has to parse the code first, so a syntax error such as a missing bracket stops it. The error message shows the line and column so you can fix it. Check that the right language is selected too.

How does minify work?

JavaScript is minified with Terser, which also shortens variable names. CSS, HTML, JSON, XML and SQL are minified by removing comments and unnecessary whitespace while keeping strings, pre blocks and scripts intact. TypeScript, Markdown and YAML are not minified because whitespace is meaningful or a compiler is needed.

Can I use tabs instead of spaces?

Yes. Choose 2 spaces, 4 spaces or tabs under Indent. JavaScript and CSS also let you choose single or double quotes and whether to end statements with semicolons, and JSON can be sorted by key.

More developer tools

All developer tools