Free Code Snippet Beautifier Online
Re-indent and clean up code in 12 languages. Auto-detect the language, indent/dedent a selection, toggle line comments, sort lines and strip blank lines. 100% client-side — your code stays private.
What does a code beautifier do? A code beautifier rewrites only the whitespace in source code — leading indentation, spacing and blank lines — so that nested structure becomes visible, while leaving every identifier, operator and string literal exactly as written. This one re-indents line by line from bracket depth: each unmatched {, ( or [ opens one level of four spaces, and each closing bracket removes one.
How to Use the Code Beautifier
- Paste the code into the input panel — The left panel holds the source. Line breaks that are already there are preserved — the tool re-indents existing lines rather than re-flowing the code, so a snippet copied from a chat window or a log file keeps its original line structure.
- Pick a language or leave it on Auto-detect — The dropdown lists 12 languages. Auto-detect runs a short series of regular expressions over the text and takes the first match, so it is a guess, not a parse. Set the language explicitly whenever the snippet is short or the result looks wrong.
-
Click Beautify — Every line is trimmed, then re-indented to the current bracket depth using four spaces per level. HTML and XML get an extra rule: a line ending in an unclosed opening tag opens a level, and a line starting with
</closes one. - Reshape a block with Indent, Dedent or Comment — These three act on the text you have selected in the input panel, not on the output. Indent adds four spaces to each selected line, Dedent removes one leading group of four, and Comment toggles the language's line-comment token on the whole selection.
-
Tidy the line list with Sort and Remove Empty — Sort reorders every line in the input alphabetically with
localeCompare— useful for import blocks, CSS property lists and config keys, and destructive for anything order-sensitive. Remove Empty drops all blank lines. - Copy the result — Copy Result puts the formatted output on your clipboard; Copy Input copies the panel you have been editing, which is what you want after using Sort, Comment or Remove Empty. Line # draws a numbering gutter for reference — the numbers are an overlay and are never copied.
How the Beautifier Decides on Indentation
Most language formatters — Prettier, Black, gofmt — build a syntax tree, throw away the original layout and print the tree back out according to a style guide. That approach is accurate but needs a full parser per language. This tool takes the lighter route: it treats the snippet as a list of lines and computes an indentation level for each one from bracket arithmetic alone. That is why it can handle a dozen languages in a few kilobytes of JavaScript, and also why it has clear limits.
The rule applied to each line is short enough to state in full. The line is trimmed of all leading and trailing whitespace, the running depth is decreased by one if the line begins with a closing bracket, the line is printed with four spaces per level of depth, and the depth is then adjusted by the net bracket count on that line:
depth += count of { ( [ − count of } ) ] on the line
Blank lines are passed through untouched and do not affect depth, and depth never goes below zero. For HTML and XML the
same counter is reused with two extra rules, since angle brackets are not counted: a line that starts with
</ closes a level, and a line that ends in an opening tag with no matching close on the same line opens one.
What follows from counting rather than parsing
- Line breaks are never added or removed. The beautifier re-indents the lines you give it. A minified file that is one long line stays one long line — there is nothing for the indenter to indent. Use a language-specific tool such as the JS Beautifier or CSS Beautifier when you need a single line expanded into a block.
- Brackets inside strings and comments still count. A line containing
print("}")or a comment ending in{shifts the depth for everything after it, because the counter does not know which characters are code. Fixing the offending line and clicking Beautify again re-runs the whole pass. - Indentation is fixed at four spaces. There is no tab option and no width setting, so a two-space or tab-indented codebase will come back at four spaces per level.
- Nothing inside a line is respaced. Operator spacing, alignment and trailing whitespace after the first character are left alone; only the leading whitespace is rewritten.
How auto-detection picks a language
Auto-detect is an ordered list of pattern tests and returns the first one that matches, so earlier tests win. An object
whose first key is quoted and followed by a JSON-shaped value is read as JSON; a <!DOCTYPE html> or
<html> opening makes it HTML; any other tag pair makes it XML; a leading SQL verb makes it SQL; and
so on down through Go, Python, Rust, Java, JavaScript and PHP. If nothing matches, the result is JavaScript.
Two consequences are worth knowing. CSS has no detection pattern of its own, so a stylesheet will be labelled something else — usually JavaScript — and you should select CSS by hand if you intend to use the Comment button. And because HTML and XML share a test, an HTML fragment without a doctype is treated as XML; for indentation purposes the two behave identically, so this only matters for comment syntax.
Language Reference
The language you select changes two things: the comment token used by the Comment button, and whether the tag-based indentation rules are applied. Everything else is language-independent bracket counting.
| Language | Comment token used | Auto-detect signal |
|---|---|---|
| JavaScript | // | Arrow functions, function declarations, .then(, or nothing else matched |
| Python | # | def, import re, if __name__ |
| HTML | <!-- … --> | A doctype or an <html> tag |
| XML | <!-- … --> | Any other opening or closing tag |
| CSS | // (not valid CSS — see below) | Not auto-detected; select it manually |
| JSON | // (not valid JSON) | Braces plus a quoted key and a JSON-shaped value |
| SQL | -- | A SELECT, INSERT, UPDATE, DELETE, CREATE, ALTER or DROP keyword |
| Go | // | func (, package, an fmt import |
| Rust | // | let mut, impl |
| Java | // | public class, System.out |
| C# | // | Not auto-detected; select it manually |
| PHP | // | Dollar-prefixed variables with the arrow operator |
The Comment button inserts // for CSS and JSON. Neither format accepts that: CSS needs /* … */, and the JSON grammar has no comment syntax at all. Commenting a CSS rule or a JSON line here will produce a file that no longer parses, so use it only for scratch notes you intend to delete.
When a Quick Re-Indent Is the Right Tool
Code arrives out of shape far more often than people write it that way. A snippet pasted into a chat client loses its leading tabs. A stack trace or a log line embeds a JSON payload with no formatting at all. A colleague sends three functions from a file that uses a different editor config. In each case you do not want a full project formatter with a config file and a CLI — you want the shape back so you can read it, and then you want to move on.
That is the gap a whitespace-only beautifier fills. Because it never touches tokens, running it is reversible in the sense that matters: the program you paste in and the program you copy out are the same program. There is no risk that a formatter opinion — trailing commas, quote style, line width — quietly changes a diff you were about to commit. If you need those opinions enforced, that job belongs in your editor and your CI pipeline, applied consistently to the whole repository rather than to one snippet in a browser tab.
The auxiliary buttons cover the other half of snippet cleanup, the part that is really line editing. Sorting is the fastest way to make two import blocks or two lists of config keys comparable before running them through a Text Diff. Removing blank lines compresses a snippet that has to fit in a slide or a ticket description. Toggling comments over a selection is how you disable a block without deleting it. Together they turn the page into a scratchpad for the ten-second edits that are annoying to do in a text field but not worth opening an editor for.
Frequently Asked Questions
In everyday use they mean the same thing, but the implementations differ. A formatter like Prettier or gofmt parses the code into a syntax tree and reprints it, so it can move line breaks, normalise quotes and wrap long lines. A beautifier of this kind only rewrites leading whitespace on lines that already exist. The output is more predictable and never surprises you, but it also cannot restructure anything.
It runs an ordered list of regular expressions over the text and returns the first match — a quoted key with a JSON-shaped value gives JSON, a doctype gives HTML, any other tag gives XML, a leading SQL verb gives SQL, and so on. If nothing matches it falls back to JavaScript. It is a heuristic, not a parser, so short snippets are frequently misread. CSS and C# have no detection pattern and must be selected from the dropdown.
No. The tool only rewrites leading whitespace, trims trailing whitespace from each line and, when you use Sort or Remove Empty, reorders or deletes whole lines. Identifiers, operators, string contents and comments pass through unchanged. The one caveat is whitespace-significant languages: in Python or YAML, changing indentation does change meaning, so check the result before pasting it back rather than assuming it is a no-op.
No. This tool re-indents the lines you give it and never inserts line breaks, so a minified file that occupies a single line comes back as the same single line. To expand minified source you need a formatter that reprints from a parse tree — use the JS Beautifier for JavaScript, the CSS Beautifier for stylesheets, or the JSON Formatter for JSON payloads.
The formatting itself is pure JavaScript in your tab and makes no network request. Note one thing before sharing a link, though: clicking Beautify also writes the selected language and the full contents of the input panel into the page URL as query parameters, so the state can be bookmarked or reloaded. That URL sits in your browser history and in anything you paste it into, so clear the input before copying the address if the snippet contains keys, tokens or customer data.
Almost always because a bracket was counted that was not structural. The depth counter adds up every {, ( and [ on a line and subtracts every closer, with no awareness of strings, regular expressions or comments — so a line containing ")" or a comment ending in { knocks the running depth out for everything below it. Find the line where the drift starts, and either rewrite it or set the indentation on that block by hand.
No, the indent unit is fixed at four spaces. The Indent and Dedent buttons use the same unit: Indent prepends four spaces to each selected line, and Dedent strips exactly one leading group of four, doing nothing to a line indented with tabs or with two spaces. If your project uses a different width, run the snippet through your editor's formatter afterwards.
There is no enforced limit — the whole snippet is held in a textarea and processed in one synchronous pass, so the practical ceiling is your browser's tolerance rather than a rule in the code. A few thousand lines format instantly; several megabytes of minified source will make the tab unresponsive while it works, and would gain nothing anyway since single-line input cannot be re-indented.
Use Cases
Recovering a Snippet Pasted Into Chat
Slack, Teams and most ticket editors strip leading tabs, so a function arrives flush against the left margin. Paste it here and click Beautify to get the nesting back before you try to read the control flow.
Tidying Code for a README
Straighten the indentation of an example block and drop the stray blank lines before pasting it into documentation, so the snippet renders at a consistent depth inside its fenced code block.
Sorting an Import or Config Block
Select a block of imports, CSS custom properties or environment keys, hit Sort, and get an alphabetised list — the fastest way to make two versions of the same block line up before diffing them.
Commenting Out a Block Without an Editor
Select the lines you want disabled and press Comment to prefix each one with the language's line-comment token — useful when you are editing in a browser-based console, a CMS field or a remote shell that has no shortcut for it.
Reading an SQL Query Out of a Log
Queries logged by an ORM come back as one wall of clauses. Break them onto lines, set the language to SQL and re-indent by parenthesis depth to see where the subqueries and joins actually sit.
Teaching Nesting to Beginners
Show a class the same twenty lines flat and then indented, and let them watch the depth counter follow the brackets — a concrete demonstration that indentation is a readability convention derived from structure, not the structure itself.