Code Formatter

Paste something minified, inherited, or just badly indented, pick the language, and get it back readable. Works the other way too: the minify button strips whitespace and comments back out when you're ready to ship. Seven languages, live character and line counts, and one click to copy the result.

🔒 Your code never leaves your browser
Input0 chars, 0 lines
Output0 chars, 0 lines

          
What is code formatting?

Formatting rewrites the whitespace in a file and leaves everything else alone. Indentation, line breaks, and the spacing around punctuation get normalised so the nesting becomes visible at a glance. The code itself does exactly what it did before, because in JSON, CSS, and HTML the whitespace between tokens carries no meaning to the parser. It exists purely for the person reading it.

That last point has one important exception. In HTML, whitespace inside a pre element or a textarea is significant and gets rendered as typed, and whitespace between inline elements can collapse into a single space that affects layout. MDN's write-up on how whitespace is handled by HTML, CSS and the DOM is the clearest explanation of when it matters. This tool leaves the contents of pre and textarea untouched for that reason.

JavaScript is the other language where line breaks can carry meaning, because of automatic semicolon insertion. A newline in the wrong place can terminate a statement you meant to continue. A full JavaScript formatter parses the code into a syntax tree before rewriting it, which is why the good ones are large libraries. This tool indents by brace depth instead, which handles ordinary code well and will not attempt to rewrap anything clever. If you need guaranteed-safe JavaScript formatting, run it through a parser-based tool in your editor.

Minifying is the same axis in reverse. Strip the whitespace and the comments and the file gets smaller, which matters for anything a browser has to download before it can render. You format while you're working and minify what you ship. The W3C CSS specifications define exactly which whitespace is insignificant in CSS, which is what makes safe minification possible in the first place.

Sources: Whitespace handling in HTML, CSS, and the DOM, plus the behaviour of JSON.parse and JSON.stringify used by the JSON mode here, are documented by MDN Web Docs, maintained by Mozilla with input from Google and Microsoft. The rules defining which whitespace is significant in CSS come from the W3C CSS specifications, the standards body that maintains the language. Neither source is a vendor blog, which is why they are the two cited here.

What this tool is best for:

Best for: Tidying minified CSS or JavaScript to make it readable, and reformatting inconsistently indented code before review

Limitations: Formats structure and indentation rather than enforcing a specific style guide, so it does not replace Prettier in a build pipeline

Best suited for: Developers reading unfamiliar or minified code they need to understand quickly

Questions people ask about formatting code

What does a code formatter actually do?

It rewrites the whitespace and nothing else. Indentation, line breaks, and spacing get normalised so the structure of the code becomes visible, while the code itself keeps doing exactly what it did before. That is the whole point: formatting is a presentation change, not a behaviour change. If a formatter alters what your code does, it is broken.

Does formatting change how the code runs?

For JSON, CSS, and HTML, no. Whitespace outside of string values and preformatted blocks carries no meaning in those languages, so the parsed result is identical. JavaScript is the exception worth knowing about, because automatic semicolon insertion means line breaks can occasionally matter. That is why this tool leaves JavaScript line structure conservative rather than aggressively rewrapping it.

Is it safe to paste private code into an online formatter?

It depends entirely on where the processing happens. Many online formatters post your input to a server, which means your code sits in someone else's logs. This one runs in your browser using JavaScript, so the text never leaves your device. You can confirm it by loading the page, disconnecting from the internet, and formatting anyway. It still works.

Why does my JSON fail to format?

Almost always one of four things: a trailing comma after the last item, single quotes instead of double quotes, unquoted keys, or a stray comment. JSON is stricter than JavaScript object syntax and allows none of those. The error message here reports the character position, which is usually enough to find it immediately.

What is the difference between formatting and minifying?

They are opposite operations on the same axis. Formatting adds whitespace so a human can read the structure. Minifying strips whitespace and comments so the file transfers faster, which matters for anything a browser downloads. You format while you are working on something and minify what you ship. Neither changes what the code does.

Get fresh reads straight to your inbox

Get notified when we publish new articles. Unsubscribe anytime.