jaen

HTML/CSS/JS Formatter & Minifier

A tool that formats HTML, CSS (SCSS, Less), JavaScript (JSX), and TypeScript with Prettier, or minifies them with terser, csso, and html-minifier-terser. It offers formatting options such as indentation and quotes, minification options such as variable name mangling, and size comparison including gzip — all processed in your browser.

Your code is never sent to a server. It is formatted and minified in your browser (in a Web Worker).

How to use

  1. Paste code into the input or drag and drop a file. If you're not sure of the language, click "Detect language".
  2. Choose the language (HTML, CSS, JavaScript, or TypeScript) with the tabs and "Format" or "Minify" next to them. For CSS you can also choose SCSS or Less.
  3. Adjust options such as indentation and print width (format) or comment removal and mangling (minify). Changes apply to the output right away.
  4. Check the size and reduction rate (including an estimate after gzip) below the output, then save with "Copy to clipboard" or "Download". Syntax errors are shown with line numbers.

About this tool

The HTML/CSS/JS Formatter & Minifier tidies website code for readability or compresses it for production. It's handy for inspecting minified code, keeping code style consistent, or quickly shrinking a file without setting up build tools — much like the SQL Formatter, but for web code.

Formatting uses the widely adopted Prettier (MIT). Minification uses terser (BSD-2-Clause) for JavaScript, csso (MIT) for CSS, and html-minifier-terser (MIT) for HTML. Aggressive optimizations that may change behavior — removing console calls, omitting attribute quotes, and dropping optional closing tags — are off by default and come with a warning.

Only the libraries needed for the selected language and mode are loaded, and only when processing starts. Processing runs in a Web Worker so the page stays responsive with large files, and your code is never sent to a server.

Frequently asked questions

Can I minify TypeScript or SCSS?

TypeScript, SCSS, and Less can only be formatted. To minify, enter the compiled JavaScript or CSS. JavaScript containing JSX can be formatted but not minified.

What is the size after gzip?

Most web servers compress files with gzip or similar when serving them. As an estimate of the actual transfer size, the sizes of the input and output compressed with gzip (maximum level) are shown.

Can minification break my code?

The defaults only apply safe optimizations, but mangling can affect code that relies on eval or function names. If you run into problems, turn off "Shorten variable names". Use the options marked with a warning only if you understand their impact.

Is my code sent anywhere?

No. Formatting and minification happen entirely in your browser.