Code Formatters & Beautifiers

Minified or badly indented code is hard to read, review and debug. A formatter takes a wall of JSON, HTML or CSS and lays it out with consistent indentation and line breaks, so you can see the structure at a glance. The same tools also work in reverse: minify a file to strip whitespace and comments before it ships.

Every formatter here validates while it formats. For example, paste invalid JSON and you get the exact position of the error instead of a silent failure. Choose two spaces, four spaces or tabs to match your project's style guide, and use the line numbers to find the problem. The SCSS compiler goes one step further and turns Sass syntax (variables, nesting, mixins) into plain CSS the browser can use.

The minifiers go the other way. The JSON minifier strips whitespace and validates in the same pass. The CSS minifier removes comments and redundant characters without touching your selectors. The JavaScript minifier runs Terser, the same compressor most bundlers use. Each one shows the size before and after, so you can see whether the step was worth it.

All processing happens in your browser tab. That makes these tools safe for API responses that contain tokens, customer data or anything else you would not paste into a third-party server.

Which tool for which job

  • Read a minified API response

    JSON Formatter. Invalid JSON gets an error with its position, so you can find the stray comma or missing quote.

  • Shrink JSON before storing it in a column or an environment variable

    JSON Minifier. The input is validated in the same pass, so a broken value never reaches storage.

  • Review a long query copied from a log or an ORM

    SQL Formatter. With each clause on its own line, a missing JOIN condition or a misplaced OR is much easier to spot.

  • Clean up HTML exported from a CMS or an email builder

    HTML Formatter. Re-indent the markup to read it, or minify it when size matters more than readability.

  • Read a production stylesheet that was minified

    CSS Formatter. Each declaration goes on its own line, so you can search for a selector and read its rules.

  • Make a stylesheet smaller without a build step

    CSS Minifier. Comments and whitespace are removed and your selectors are left as written.

  • Minify a script for a page that has no bundler

    JavaScript Minifier. It runs Terser, the compressor webpack uses for production builds, and shows the size before and after.

  • Use Sass variables and nesting without installing anything

    SCSS to CSS Compiler. The output is plain CSS you can paste into a stylesheet or a style tag.

  • Check an XML payload, feed or sitemap for errors

    XML Formatter. It validates while it formats, so an unclosed tag or a bare & is reported as an error.

  • Find out why a YAML file will not load

    YAML Formatter & Validator. The validator points to the first error. In YAML that is often a tab used for indentation, which the format does not allow.

Other tool categories

Specifications and references

This tool follows the specifications below. Read them when you need the exact normative wording, for example to settle an edge case between two implementations.

Frequently Asked Questions

Can formatting change how the code behaves?

For JSON and SQL it cannot, because whitespace between tokens has no meaning there. YAML uses indentation for structure, so the YAML formatter parses the document and writes it out again, which keeps the structure intact. HTML needs more care. Whitespace between inline elements renders as a space, and inside <pre> and <textarea> it shows exactly as typed, so reformatting or minifying HTML can change spacing on the page.

Is it worth minifying JSON or CSS that the server already gzips?

The gain is smaller than the raw numbers suggest. Gzip and Brotli compress repeated whitespace very well, so the gap between a minified file and a formatted one shrinks a lot after compression. Minify anyway for assets that every visitor downloads, and for values stored or sent without compression, such as JSON in a database column, a cookie or an environment variable.

Why does the JSON formatter reject something JavaScript accepts?

JSON is a strict subset of JavaScript object syntax. Keys need double quotes, strings cannot use single quotes, and comments and trailing commas are not allowed. A config that works as a JavaScript object, or as JSONC in a file like VS Code's settings.json, will fail here until you remove those.

Copied to clipboard!