Open menu

Code Beautifier – Format JavaScript, CSS, HTML and JSON

Paste minified or untidy code and beautify it with consistent indentation: JavaScript, CSS and HTML with js-beautify, and JSON with the browser's own parser, including optional key sorting. Choose two spaces, four spaces or tabs, compare before and after in a diff view, and switch to Minify to compress the code again. Several files can be processed at once and downloaded as a ZIP. Everything runs in your browser.

Your code

Paste code, or drop files here. Engines load only when you press the button.

Result

Files

.js .mjs .css .html .htm .svg .json — several at once for a batch
Engines and licenses

This tool uses these open-source engines, loaded only when needed:

  • Terser — JavaScript minifier (BSD-2-Clause)
  • Lightning CSS — CSS minifier (safe) (MPL-2.0)
  • CSSO — CSS minifier (structural) (MIT)
  • HTMLMinifier (Terser) — HTML minifier (MIT)
  • SVGO — SVG optimizer (MIT)
  • js-beautify — JS, CSS and HTML beautifier (MIT)
  • jsdiff — Diff view (BSD-3-Clause)
  • fflate — ZIP download for batches (MIT)
  • brotli-wasm — Brotli size estimate (when the browser has no native brotli) (Apache-2.0)

100% in your browser: your code is processed on this device and never uploaded.

How to use the code beautifier

  1. Choose Beautify or Minify, then the language: JavaScript, CSS, HTML or JSON.
  2. Paste your code or drop files (several at once for a batch).
  3. Pick the indentation: 2 spaces, 4 spaces or a tab. For JSON, optionally sort keys.
  4. Press Beautify and copy or download the result.
  5. Open the diff view to see exactly what changed.

How it works

Language Engine What it does
JavaScript js-beautify Re-indents blocks, puts statements on their own lines, keeps up to two blank lines
CSS js-beautify One declaration per line, indented rules and at-rules
HTML js-beautify Indents nested elements, keeps inline elements on one line
JSON Built-in parser Parses strictly, then prints with your indentation; can sort keys

Switch to Minify to compress code again with the same engines as the dedicated minifiers.

Worked examples

  • function a(){return 1} becomes a three-line function with the body indented.
  • .a{color:red} becomes a rule block with color: red on its own indented line.
  • {"b":1,"a":2} with Sort JSON keys becomes { "a": 2, "b": 1 } on separate lines.

Tips and common mistakes

  • Pick the right language: formatting HTML as JavaScript gives odd results.
  • Fix JSON errors first: the beautifier won’t guess what invalid JSON meant.
  • Don’t expect comments back: minifiers remove them, and a beautifier can’t restore them.
  • Match your project’s style: use the same indentation as your editor or formatter config to avoid noisy diffs.

Why use this beautifier

It covers four languages in one place, runs privately in your browser, shows a diff, handles batches with a ZIP download and works fully with a keyboard and screen reader.

When beautifying helps most

Beautified code is much easier to review and debug. Use it to read a minified library before deciding whether to depend on it, to inspect what a build tool or CMS outputs, to compare two versions of a config file in a diff, or to tidy a snippet copied from a chat or an email before committing it. For JSON in particular, consistent indentation and sorted keys make version-control diffs show only the real changes, which speeds up code review.

Frequently asked questions

Which languages are supported?

JavaScript, CSS, HTML and JSON. Choose the language above the editor, or drop a file and it is detected from the extension.

Can it reverse minification completely?

It restores readable formatting and indentation, but not things minification removed for good, such as comments and original variable names. For that you need the source or a source map.

Why does my JSON fail to format?

The JSON is invalid, for example a trailing comma or single quotes. The error shows the line and column so you can fix it. Use the JSON Formatter if you need to repair common mistakes automatically.

Can I sort JSON keys?

Yes. Turn on Sort JSON keys to order object keys alphabetically at every level, which makes files easier to compare.

Is my code uploaded?

No. Formatting runs in a background worker in your browser.

Tabs or spaces?

Choose whichever your project uses: 2 spaces is common for web code, 4 spaces in many style guides, and tabs let each reader set their own width.

Sources