Code beautifier

Indent and tidy JavaScript, CSS and HTML.

Language Indent

You open a bundled .js file to check one function and find the whole thing on a single line. Or you inherit a stylesheet where the indentation drifted years ago and nobody fixed it.

Paste the code, pick the language and indent style, and press Beautify. The formatted version appears below with a Copy button.

How it works

The two settings

Language selects the parser: JavaScript, CSS, or HTML. This isn't cosmetic — each format has different rules about where a line can break, so choosing wrongly produces mangled output rather than a helpful error. If you're formatting a .jsx, .ts, or .json file, JavaScript is the closest match and usually handles it.

Indent controls the output: 2 spaces, 4 spaces, or a tab per level. Two spaces is the common default in JavaScript and CSS projects; four is more usual in HTML and in some team style guides; tabs are preferred by developers who want each reader to set their own visual width.

What it does and doesn't do

Beautifying re-inserts the line breaks and indentation that a minifier stripped out. It does not undo the rest of minification. Names shortened to a, b, c stay shortened, because the original names were discarded when the file was built and cannot be recovered. So beautified bundle code becomes navigable, not readable-as-source.

Removed by minifying	Restored by beautifying?
Line breaks and indentation	Yes
Comments	No — they were deleted
Original variable names	No — irreversible
Dead code (tree-shaken)	No

Common mistakes

The usual failure is a language mismatch: pasting an HTML file with JavaScript selected, or pasting a CSS-in-JS block as CSS. Check the dropdown first if output looks scrambled. Embedded <style> and <script> blocks inside an HTML document are handled when you select HTML.

Formatting runs entirely in your browser, so nothing is uploaded. Keep in mind that other people's minified code is still their code — check the license before reusing what you find inside it.

Terms explained

Beautify: Reformatting code with consistent line breaks and indentation. It changes only whitespace, never behaviour.
Minify: The reverse: stripping whitespace, comments, and long names to shrink a file for delivery. Beautifying reverses the whitespace part only.
Indent size: How many spaces make one nesting level. Two and four are both common; the important thing is being consistent within a project.
Tabs vs spaces: Tabs let each reader choose their own display width; spaces guarantee everyone sees identical alignment. Teams usually pick one and enforce it.
Source map: A separate file that maps minified code back to the original source. If one exists, your browser's devtools can show the real source — better than beautifying.

Frequently asked questions

Can beautifying recover the original variable names from a minified file?

No. Minification replaces names like `userAccount` with `a` and throws the originals away. Beautifying restores structure and indentation only, so the code becomes navigable but not identical to the source. A source map, if the project published one, is the only way back.

Which indent size should I choose?

Match whatever the project already uses — consistency matters more than the specific number. If there's no existing convention, 2 spaces is the common default for JavaScript and CSS, and 4 for HTML.

What happens if I pick the wrong language?

The output will be wrong rather than blank, because the parser tries to apply rules that don't fit. If the result looks scrambled, change the Language dropdown and run it again.

Does beautifying change how the code behaves?

No. Only whitespace and line breaks change. One caveat: JavaScript that relies on automatic semicolon insertion in unusual ways can be sensitive to reformatting, so run your tests if you're reformatting code you intend to ship.

Can it format JSON, TypeScript, or JSX?

Select JavaScript. All three are close enough to JavaScript syntax that the formatter handles them in practice, though very new TypeScript-only syntax may not indent perfectly.