代码美化/格式化工具

What "beautifying" code actually does

Minified, one-line, or inconsistently indented code is valid but unreadable. Beautifying re-introduces the line breaks and indentation that a human needs to scan structure at a glance — without changing what the code does. This tool re-formats six languages from a single panel: JSON, HTML, CSS, JavaScript, XML, and Python. Pick the language tab, paste into the left box, choose 2- or 4-space indentation, and the formatted result appears on the right. Everything happens locally in your browser, so nothing you paste is ever transmitted — useful when the snippet is a config file or contains keys you would not want to send to a server.

Each language is handled differently

Formatting isn't one algorithm — each language has its own structural rules, and the tool uses a tailored strategy for each:

• JSON is parsed and re-serialised. The tool runs the text through a real JSON.parse and then JSON.stringify with your chosen indent. Because it genuinely parses, it is also a strict validator: invalid JSON produces an error instead of garbled output, so beautifying is a quick way to confirm a payload is well-formed.
• HTML and XML share tag-based logic. The text is split on tags, and an indent level rises on each opening tag and falls on each closing tag. Self-closing tags and the void elements (br, img, input, meta, hr and the rest) correctly do not increase depth, so they don't throw off the nesting.
• CSS is normalised by collapsing whitespace, then putting each declaration on its own indented line, placing a newline after { and before }, and breaking after every ;.
• JavaScript is re-indented with a brace-aware walk. The formatter tracks { and } to raise and lower depth and breaks lines after each ;. Crucially, it tracks when it is inside a string (single, double, or backtick quotes) so that braces and semicolons inside string literals are left untouched.
• Python can't be re-braced because indentation is its syntax, so the tool normalises indentation instead: it increases depth after a line ending in a colon and dedents on block keywords like else, elif, except, finally, and case.

A worked example

Switch to the JSON tab and paste the minified string {"user":{"name":"Ada","roles":["admin","editor"]}} with 2-space indentation. The output expands to a readable tree: the outer object opens, user sits on its own indented line as a nested object, name appears as a string, and roles becomes an array with each element on its own line. The same content, now legible. Paste deliberately broken JSON — say a trailing comma — and instead of mangled text you get a clear error message, because the parse step refuses invalid input.

Practical tips

• Use it as a validator. For JSON specifically, a successful beautify is proof the document parses. If you only care about validity, paste and beautify — an error means there's a syntax problem to fix.
• Match your project's indent. Many JavaScript and JSON style guides use 2 spaces; Python's PEP 8 uses 4. Set the dropdown to whatever your codebase already uses so the result drops in cleanly.
• Beautify before diffing. Re-formatting a minified vendor file before committing it makes future diffs readable, turning an unreviewable one-line change into a clear line-by-line one.
• Copy straight out. The Copy button lifts the formatted result to your clipboard in one click, so you can paste it back into your editor without re-selecting.

Where the limits are — and why that's fine

This is a lightweight structural formatter, not a full language parser like Prettier or Black. That distinction matters in a few cases. The JavaScript re-indenter works from braces and semicolons, so it formats brace-delimited blocks well but won't, for example, reflow long argument lists or enforce a line-length limit. The Python pass normalises indentation depth but assumes reasonably conventional code; unusual constructs spread across continuation lines may not be detected. The HTML formatter indents by tags and won't rewrite attributes. For everyday cleanup — making a pasted snippet readable, expanding a minified blob, sanity-checking JSON — these trade-offs are invisible. For enforcing a strict house style across a whole repository, run a dedicated formatter in your build instead.

Common mistakes to avoid

• Choosing the wrong tab. The language tab decides which formatter runs. Beautifying CSS under the JSON tab will throw a parse error; pick the tab that matches your input.
• Expecting it to fix bugs. Beautifying changes layout, not logic. It won't repair a missing bracket in JavaScript — it only re-indents what's there.
• Pasting a partial fragment. A snippet with unbalanced braces or tags will indent oddly because the depth counter never returns to zero. Format complete blocks for the cleanest result.