Search DevTools

Jump to any tool or page

Code Formatter

Format and minify JSON, YAML, XML, HTML, and CSS in your browser — indentation only, never a change in meaning.

Settings

Mode
NotesJSON5 input (comments, trailing commas) is accepted and normalized to strict JSON.

Input

paste your code

Output

Format your code and the result appears here.

Send toTypeScript typesYAML

About this code formatter

Formatting is a pure syntactic transform. Whitespace, line breaks, and indentation change; meaning does not. A formatter that alters what your code does is not a formatter with a bug — it is a corruption tool. Every language here is parsed into a structure first and printed back out from that structure, so the output is a faithful re-rendering rather than a pile of regex substitutions applied to text.

Languages supported

  • JSON – parsed with JSON.parse, falling back to JSON5 so comments and trailing commas are accepted and normalized into strict JSON.
  • YAML – round-tripped through a real YAML document parser, which re-emits consistent indentation and resolves anchors.
  • XML and HTML – tokenized into a tag tree that tracks quoting inside attributes, void elements, and HTML’s implicit end tags.
  • CSS – a brace and semicolon indenter that walks strings, comments, and parentheses as units so nested at-rules and urls survive intact.

Why a parser and not a regex. Text that looks like structure very often is not. A CSS declaration can contain a closing brace inside a quoted string; an HTML attribute can contain a > character; a script block can contain < used as a comparison. Comments turn up in positions no pattern anticipates. A tokenizer that understands quoting handles all of these; a pattern match on braces or angle brackets silently mangles them.

Idempotence is the correctness test. Formatting already-formatted code must produce identical output. If a second pass changes anything, the formatter is not describing a canonical form and its output will churn in every diff. Each language here is checked against that property, including the awkward cases — preserved <pre> and <textarea> blocks, whose contents are whitespace-significant and are reproduced byte for byte.

Tabs versus spaces is a team convention, not a correctness question, so both are offered — with one exception. YAML forbids tabs as indentation outright, so the option is disabled there rather than quietly producing a file that no parser will read.

Why JavaScript and TypeScript are not here. Formatting them correctly requires a full parser. Automatic semicolon insertion means a line break in the wrong place changes what a program does; template literals, regex literals, and JSX all defeat naive tokenizing. A regex-based JavaScript formatter does not produce imperfect output, it produces broken code. A tool that formats five languages losslessly is worth more than one that claims ten and quietly damages your source. SQL is excluded for the same reason: keyword-based line breaking mangles dialect-specific syntax and string literals.

Everything runs locally in your browser. Nothing you paste is uploaded, which makes this safe for configuration files and payloads that contain credentials.

Developer Utilities

About Code Formatter

Format and beautify JSON, YAML, CSS, XML, and HTML with a configurable indent, or minify JSON and CSS back down. Each language is handled by a parser that understands its grammar, and the tool deliberately covers only what it can reformat without risking a change in meaning.

Related Developer Utilities tools

Token CounterZod GeneratorBase64 Encoder/DecoderSecret ScannerHash Generator

Frequently asked questions

Why is JavaScript not in the language list?
Because formatting it safely requires a real parser, and a regular expression based formatter corrupts code. Automatic semicolon insertion means a newline in the wrong place silently changes what a program does; braces and quotes appear inside strings, regex literals, and template literals; and comments can sit anywhere. A tool that mangles source is worse than no tool, so this one covers only the languages it can reformat losslessly rather than claiming a longer list.
Should formatting ever change what my code does?
No. Formatting is a purely syntactic transform: whitespace, line breaks, and indentation may change, but the parsed meaning must be identical. This is why formatters are safe to run automatically on save or in CI, and why any formatter that alters semantics is simply broken. It is also why a formatter must preserve content inside strings and, in HTML, inside pre and textarea elements where whitespace is significant.
What does it mean for a formatter to be idempotent?
That formatting already formatted code changes nothing: running it twice gives the same result as running it once. This is the property that makes a formatter usable in a pipeline, because otherwise every run produces a fresh diff and the file never stabilises. It is a genuinely useful check on any formatter, including this one: format, format again, and compare.
Tabs or spaces?
Either, consistently. The practical argument for tabs is accessibility, since a tab is a single character whose displayed width each reader can configure, which matters to developers who need large indentation. The argument for spaces is that alignment renders identically everywhere. What actually causes problems is mixing them in one file, which makes indentation depend on the viewer's tab width and produces code that looks correct to its author and wrong to everyone else.
Why does minification only apply to some languages?
Because whitespace carries meaning in the others. JSON and CSS can have insignificant whitespace stripped with no change in behaviour, so minifying is safe and worthwhile for transmission size. In YAML indentation is the structure, so there is nothing to remove. In XML whitespace inside elements can be significant content, so stripping it may alter the document. Minification is offered only where it cannot break the input.