Does my code leave the browser?

No. The tokenizer, beautifier, and minifier all run in your browser. There is no network request tied to the tool and nothing is logged.

How does this compare to terser, esbuild, or lightningcss?

Those tools parse the full grammar and apply safe transformations during a build. This formatter is optimized for quick copy-paste work — inspecting a minified stylesheet, expanding a one-line snippet, or shrinking config for a URL. For production builds, use a dedicated minifier in your pipeline.

Will minifying JavaScript break my code?

The JS minifier preserves strings, template literals, regex, and comments as separate tokens. It keeps newlines before statements that rely on automatic semicolon insertion (return, throw, lines starting with (, [, /). It does not rename variables or dead-code eliminate — that requires a full parser.

Why does my JavaScript object literal always expand onto multiple lines?

The beautifier is brace-based: every { starts a new indent level. That keeps the output predictable for blocks but expands object literals vertically. If you need compact object literals, minify first and use Beautify only for the surrounding structure.

What about whitespace inside or ?

Preserved exactly. The HTML formatter recognizes pre, textarea, script, and style as content-preserving elements. script and style blocks are re-indented as a unit, but their internal contents are kept as written so the JavaScript/CSS inside is not accidentally rewritten.

$code-formatter

Formatters

Beautify or minify HTML, CSS, and JavaScript. Pick the language, pick an action, paste your code — everything runs in your browser.

HTML input

Beautified output517 chars

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/app.css">
  </head>
  <body>
    <main class="wrap">
      <h1>Hello</h1>
      <p>
        Welcome to
        <strong>MakeMyDev</strong>
        . Try pasting a minified file to see it expand.
      </p>
      <ul>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
      </ul>
      <pre>  this      whitespace     is   preserved</pre>
    </main>
  </body>
</html>

Options

Indent

How to format and minify HTML, CSS, and JavaScript

Paste any HTML, CSS, or JavaScript into the input panel, pick Beautify for a consistently indented version or Minify to strip comments and whitespace. Everything happens in your browser — nothing is uploaded, nothing is logged.

Pick a language. HTML handles full documents or fragments. CSS handles stylesheets, including at-rules like @media and @supports. JavaScript handles ES2015+ syntax: classes, arrow functions, template literals, async/await, and regular expressions.
Beautify or minify. Beautify re-indents nested structure for readability. Minify strips comments and collapses whitespace so the code fits through systems that dislike line breaks — JSON fields, environment variables, or URL query strings.
Pick indent. 2 spaces is the default; 4 spaces matches many team style guides; tabs work in editors where width is configurable.
Copy, download, or iterate. Output updates live. Copy to clipboard for a quick paste, or download as a file with the correct extension.

What each formatter handles

HTML — full documents (with DOCTYPE) or fragments. Void elements (br, img, input, meta, link…) are recognized automatically. Contents of <pre>, <textarea> are preserved verbatim. Inline elements (a, span, em, strong, code…) stay on one line with their surrounding text when short.
CSS — selectors, nested at-rules (@media, @supports, @keyframes), declarations with !important, comma- separated selector lists, and comments. Bang comments (/*! … */) survive minification so license headers stay intact.
JavaScript — tokens are parsed so that strings, template literals, regex literals, and comments are preserved exactly. Minification drops comments, merges whitespace, and inserts line breaks where needed to keep ASI-sensitive statements safe (return, throw, and lines starting with (, [, or /).

When to reach for a dedicated tool

This formatter is built for quick copy-paste work — debugging a minified stylesheet, expanding a one-line snippet from a blog post, or shrinking a config value for a query string. For production builds, a dedicated minifier (esbuild, terser, swc, lightningcss) will produce smaller output with safer transformations because it parses the full language grammar. Treat this tool as a fast diagnostic aid, not a replacement for your build pipeline.

Limitations

The JavaScript beautifier is brace-based — it does not parse expressions, so binary operators retain their original spacing and object literals are always expanded multi-line. The HTML beautifier keeps contents of <script> and <style> blocks as written (it does not re-format them). If you need those re-formatted, switch the language to CSS or JavaScript and paste the inner contents directly.

// how-to

How to beautify and minify HTML, CSS, and JavaScript

Paste HTML, CSS, or JavaScript and choose Beautify for a readable version or Minify to strip comments and whitespace. Everything runs locally in your browser.

Pick the language
Switch between HTML, CSS, and JavaScript from the language tabs. The tool adjusts tokenization and indentation rules for each.
Choose Beautify or Minify
Beautify re-indents nested structure for readability. Minify removes comments and collapses whitespace so the code fits into JSON fields, env vars, or URL query strings.
Paste and tweak options
Paste your code. The output updates live. For Beautify you can pick 2 spaces, 4 spaces, or tab indentation.
Copy or download
Copy to the clipboard or download the result with the correct file extension (.html, .css, .js, or .min variants).

// faq

? Does my code leave the browser?: No. The tokenizer, beautifier, and minifier all run in your browser. There is no network request tied to the tool and nothing is logged.
? How does this compare to terser, esbuild, or lightningcss?: Those tools parse the full grammar and apply safe transformations during a build. This formatter is optimized for quick copy-paste work — inspecting a minified stylesheet, expanding a one-line snippet, or shrinking config for a URL. For production builds, use a dedicated minifier in your pipeline.
? Will minifying JavaScript break my code?: The JS minifier preserves strings, template literals, regex, and comments as separate tokens. It keeps newlines before statements that rely on automatic semicolon insertion (return, throw, lines starting with (, [, /). It does not rename variables or dead-code eliminate — that requires a full parser.
? Why does my JavaScript object literal always expand onto multiple lines?: The beautifier is brace-based: every { starts a new indent level. That keeps the output predictable for blocks but expands object literals vertically. If you need compact object literals, minify first and use Beautify only for the surrounding structure.
? What about whitespace inside <pre> or <textarea>?: Preserved exactly. The HTML formatter recognizes pre, textarea, script, and style as content-preserving elements. script and style blocks are re-indented as a unit, but their internal contents are kept as written so the JavaScript/CSS inside is not accidentally rewritten.