Code Format

What it's for

Make code smaller, or make squashed code readable again, for HTML, CSS, JavaScript, SQL and SVG.

• When you’re putting a snippet into a page, an email template or a bookmarklet and want it as small as it can be.
• When you’re reading minified code from a website or a build, or a query logged on one long line, and want it laid out with one statement per line.

How to use it

Choose the language and an indent (2 or 4 spaces, or tabs), paste the code, then:

• Prettify lays it out with line breaks and indents, using js-beautify for HTML, CSS and JavaScript, and sql-formatter for SQL. SVG is laid out as XML Format does it, keeping comments.
• Minify removes comments and unneeded whitespace. JavaScript also goes through Terser, which shortens local names and simplifies the code. SVG goes through SVGO, which also rounds numbers and simplifies shapes. In HTML, <style> and <script> contents are minified too.

The message line shows the size before and after. The language and indent are remembered in this browser. Each language’s library loads the first time you use it.

Make an image draws the result (or the code, before you format it) as a syntax-highlighted picture in a window frame, dark or light, for slides, documents and posts; Download PNG saves it at twice screen size, so it stays sharp.

Example

Choose JavaScript, paste this and choose Minify:

function add(first, second) {
  // Add two numbers
  return first + second
}
console.log(add(1, 2))

The result is function add(d,n){return d+n}console.log(add(1,2));, and the message says it is 48% smaller. Paste that back in and choose Prettify: the layout returns, but the comment and the names first and second don’t.

Good to know

Prettifying can’t bring back what minifying removed: comments, and local names that Terser shortened. Terser keeps top-level names, and comments starting /*! or containing @license; the CSS minifier removes every comment.

HTML minifying keeps one space where whitespace could show on the page (between <b> and <i>, say) and removes it next to block elements such as <div> and <p>. <pre> and <textarea> are left exactly as they are, as are scripts of other types, such as templates. IE conditional comments are kept.

SQL minifying keeps strings and quoted names as they are, including MySQL’s \' escapes. Prettifying uses standard SQL, so some dialect-specific syntax may be reported as an error.

SVGO can remove or shorten ids, which matters if CSS or a script outside the SVG uses them.