Code Beautifier (HTML, CSS, JavaScript)

A code beautifier takes cramped, minified or messy code and lays it out with consistent indentation and line breaks so a person can actually read it. Our free Code Beautifier handles HTML, CSS and JavaScript in one place, using the widely used open-source js-beautify library. Choose two or four spaces or tabs, set a wrap length, decide whether to keep blank lines, then copy or download the tidy version. It works as an HTML beautifier, a CSS beautifier and a JavaScript beautifier, and everything runs in your browser, so your code is never uploaded.

How to use the Code beautifier

1. 1 Pick the language tabChoose HTML, CSS or JavaScript. Each tab uses the matching js-beautify formatter, which understands that language's structure and rules.
2. 2 Paste your codeDrop in a minified file, a block copied from a CMS or browser developer tools, or anything that has lost its formatting.
3. 3 Set the indentationUse two spaces, four spaces or tabs. Match whatever your project or team already uses so the result slots in without noisy changes.
4. 4 Choose wrapping and blank linesSet the wrap length to off, 80 or 120 characters, and decide whether existing blank lines between blocks should be kept.
5. 5 Beautify, then copy or downloadRun the formatter, check the output, then copy it to your clipboard or download it as a file ready to drop into your editor.

What a code beautifier does

Computers do not care how code is laid out. A browser will happily read a whole stylesheet squashed onto one line, or a script with no indentation at all. People are different: we rely on indentation to see which rules belong inside which blocks, which tags are nested inside others, and where a function starts and ends. A beautifier, sometimes called a pretty printer or code formatter, rebuilds that visual structure automatically.

It does this by parsing the code into tokens, such as tags, selectors, properties, keywords, strings and brackets, then printing them back out with line breaks and indentation applied according to rules for that language. In HTML, each nested element is indented one level deeper than its parent. In CSS, each declaration gets its own line inside its rule. In JavaScript, blocks inside braces are indented and statements are placed on separate lines.

Our tool uses js-beautify, an open-source project that has been used by developers and code editors for many years. It is deliberately conservative: it changes whitespace and layout, and leaves the meaning of your code alone.

When an HTML, CSS or JavaScript beautifier helps

There are plenty of everyday situations where you are handed code that is hard to read, and a quick pass through a beautifier saves a lot of squinting.

• Reading minified files: production CSS and JavaScript are often minified to save bandwidth. Beautifying a copy makes it possible to follow what a third-party script or theme stylesheet is doing.
• Tidying CMS and page builder output: WordPress, email builders and website builders can produce HTML with odd line breaks and deep nesting. Formatting it shows the real structure before you edit by hand.
• Debugging layout problems: a missing closing tag or an extra brace is much easier to spot when indentation lines up and every level is clearly visible.
• Preparing code for a review: consistent formatting means reviewers focus on what changed and why, rather than on spacing.
• Learning from other sites: students and junior developers can study the structure of real pages and stylesheets more easily once they are laid out properly.
• Cleaning up pasted snippets: code copied from emails, chat messages or PDFs often loses its indentation along the way.

Indentation, wrapping and blank lines explained

Indentation is the main setting. Two spaces is common in web projects, particularly for HTML and JavaScript, because deeply nested markup stays readable without drifting far to the right. Four spaces is popular in many other languages and some teams prefer it for clarity. Tabs let each developer choose how wide an indent looks in their own editor. None of these is objectively correct; what matters is that a project uses one style consistently.

The wrap length controls how long a line can get before the formatter tries to break it. Off leaves long lines alone, which is often best for HTML containing long paragraphs of text. Eighty characters is a traditional limit that suits side-by-side diffs and narrow screens. One hundred and twenty is a common modern compromise on wide monitors. Wrapping is a best effort: a very long string or URL cannot be broken without changing it, so some lines may still run past the limit.

Preserving blank lines keeps the gaps you deliberately left between groups of rules or sections of a script, which often carry meaning for the author. Turn it off if the input is full of random empty lines you want removed. Either way, the formatter will not add or remove code, only whitespace.

What beautifying cannot do

It is worth being clear about the limits. Beautifying restores layout, not lost information. When JavaScript is minified by tools such as Terser or UglifyJS, long descriptive variable and function names are usually replaced with single letters, and comments are stripped out. A beautifier can put the code back on separate, indented lines, but it has no way of knowing that a variable called e was originally called customerEmail. The result is readable in shape but still terse in content.

If you need the original names, look for a source map, a file ending in .map that some sites publish alongside their scripts, or ask the author for the unminified source. Browser developer tools can use source maps automatically when they are available.

A beautifier is also not a validator or a linter. It will format code that contains mistakes, and if the code is badly broken, for example with an unclosed string or a missing brace, the output may look odd because the formatter has to guess where structures begin and end. Use a linter such as ESLint or Stylelint, or an HTML validator, when you need to find errors rather than tidy layout.

Beautifiers, Prettier and EditorConfig in real projects

An online beautifier is ideal for one-off jobs: a snippet from a client, a minified file you want to inspect, or a block of CMS output you are about to edit. For an ongoing project with several developers, it is better to automate formatting inside the project itself so that everyone gets the same result without thinking about it.

Prettier is a popular open-source formatter that supports HTML, CSS, JavaScript, TypeScript and more. It is opinionated, with relatively few options, which stops teams arguing about style. It can run in your code editor every time you save, and in a pre-commit hook or continuous integration check so unformatted code never reaches the main branch. EditorConfig is a small file, named .editorconfig, that tells most editors which indent style, indent size and line endings to use for each file type. It does not reformat existing code, but it keeps new edits consistent.

Our tool sits comfortably alongside both. Use it when you are away from your usual setup, when you are working with code outside a project, or when you simply want a quick, readable view of something without installing anything.

Your code stays in your browser

The js-beautify library runs entirely in JavaScript on your device. Nothing you paste is sent to our server, stored or logged. That makes the tool safe for client work under a confidentiality agreement, internal scripts and unreleased templates. Even so, it is good practice to remove API keys, passwords and tokens from any code before you paste it into a website, ours included.

Because nothing is saved, the editor clears when you refresh or close the page. Copy or download the beautified version before you move on.

Examples you can copy

Before:
.btn{padding:12px 20px;background:#0b7a5c;color:#fff}.btn:hover{background:#09634b}

After (2 spaces):
.btn {
  padding: 12px 20px;
  background: #0b7a5c;
  color: #fff
}

.btn:hover {
  background: #09634b
}

Before:
function t(e){if(!e)return!1;var n=e.trim();return n.length>5}

After (2 spaces):
function t(e) {
  if (!e) return !1;
  var n = e.trim();
  return n.length > 5
}

Before:
<div class="row"><div class="col"><h2>Opening hours</h2><p>Mon to Fri, 9am to 5pm</p></div></div>

After (2 spaces):
<div class="row">
  <div class="col">
    <h2>Opening hours</h2>
    <p>Mon to Fri, 9am to 5pm</p>
  </div>
</div>

Common mistakes to avoid

Frequently asked questions