Code Minifier and Beautifier for HTML, CSS, and JavaScript

Minification rewrites source code into a smaller representation. Depending on the language and engine, it can remove unnecessary whitespace and comments, shorten or restructure expressions, combine compatible CSS rules, shorten JavaScript variable names, and eliminate redundant JavaScript. Readable JavaScript such as:

function calculateSubtotal(items) {
  return items.reduce((total, item) => {
    return total + item.price * item.quantity;
  }, 0);
}

can become a compact single-line representation similar to:

function calculateSubtotal(t){return t.reduce((t,c)=>t+c.price*c.quantity,0)}

Beautification does the reverse presentation task, adding consistent whitespace and indentation to compressed or poorly formatted code for review, debugging, and understanding third-party snippets. It does not reconstruct original comments, variable names, or author intent — information removed during minification generally cannot be recovered from the minified file.

JavaScript minification uses Terser. Its default process can do more than remove spaces: it can compress expressions and mangle eligible names. That often produces better savings, but it is also why transformed JavaScript needs meaningful tests. The output may shorten local identifiers and rewrite syntax while preserving intended behavior, so do not rely on exact minified variable names. Code that uses string-based name lookup, reflection, direct eval, unusual build-time macros, or undocumented framework conventions can be sensitive to mangling or compression.

The tool returns processed code only; it does not generate a source map. Without one, production stack traces refer to the minified file's lines and columns, making debugging harder. A pasted fragment also lacks the context of imports, exports, target-browser configuration, TypeScript compilation, JSX transformation, and bundler defines — this tool processes JavaScript text, it is not a full bundler or transpiler. Compile language extensions before minification and validate the result in the intended runtime.

CSS minification uses CSSO, which can remove redundant syntax and optimize compatible structures in addition to deleting whitespace — for example, it may merge separate margin declarations into a shorter equivalent when it determines that is safe. Because CSS behavior depends on cascade order, specificity, custom properties, and browser support, test key pages and states after minification, including responsive breakpoints, hover and focus states, dark mode, printed output, and right-to-left layouts.

The tool does not run PostCSS, resolve imports, rewrite asset URLs, add vendor prefixes, or understand a framework's purge configuration, and it does not compile Sass, Less, or another preprocessor into CSS. Provide compiled CSS as input.

HTML minification uses a lightweight built-in routine rather than a full HTML compiler. It removes HTML comments, collapses repeated spaces and tabs outside protected blocks, removes whitespace between tags, removes line indentation, and trims the result. Blocks matching pre, textarea, script, and style are protected from the whitespace pass. That design is fast, but HTML whitespace can be meaningful:

<span>First</span> <span>Second</span>

Removing the text space between the closing and opening tags can display FirstSecond, so always visually test inline content after HTML minification. The routine also removes HTML comments, which may drop conditional comments, template markers, build directives, or legal notices. Embedded <script> and <style> contents are preserved rather than independently minified — process those assets separately when needed.

Beautification uses language-specific js-beautify functions with a fixed two-space indentation setting: JavaScript is processed by the JavaScript beautifier, CSS by the CSS beautifier, and HTML by the HTML beautifier with its supporting language modules loaded as needed. For example, this dense CSS:

.card{display:grid;gap:1rem;padding:1.5rem}.card h2{margin:0;color:#172554}

can be reformatted as:

.card {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
}

.card h2 {
  margin: 0;
  color: #172554;
}

There are no controls for tabs, brace style, maximum line length, quote preference, or semicolons. Use the result as a readable baseline; if a repository enforces Prettier, ESLint, Stylelint, or another formatter, run the project's configured tooling before committing. Beautification is not syntax repair, and it is not deobfuscation: meaningful names and removed control structure cannot reliably be inferred.

After successful processing, the tool shows input size in bytes, output size in bytes, and the percentage change. The byte values are measured by creating browser Blob objects from the input and output, so they reflect the UTF-8 size of the displayed text, and Unicode characters may require more than one byte. For minification a reduction is shown with a minus sign; beautification usually increases size and can show a plus sign.

The percentage is calculated from the uncompressed input and output; it is not a measurement of Brotli or gzip transfer savings. A large raw reduction may become a smaller network improvement after HTTP compression because repeated whitespace already compresses well, so measure the actual built and compressed assets when optimizing production performance.

Processing occurs in the browser and the tool does not execute, evaluate, or render the pasted code. Required parsing libraries are loaded on demand from third-party content delivery infrastructure.

Source code can contain credentials, internal endpoints, customer identifiers, proprietary logic, and comments never intended for distribution. Remove secrets before pasting, follow organizational policy, and prefer representative snippets. Minification is not a secret-removal tool: string literals, URLs, API keys, and embedded configuration can remain readable in the output. Never assume minification protects intellectual property — it creates friction for humans but is reversible enough to inspect and beautify. Use proper access controls and secret management.