Code Formatter, Minifier & Compiler

Online Code Formatter, Beautifier, Minifier & Compiler

CodeFormat is a free, privacy-first online code formatter, beautifier, minifier and compiler that runs 100% in your browser. Prettify or minify HTML, CSS, JavaScript, TypeScript, JSON, SQL, Python, Go, Rust and 20+ more languages, compile SCSS/LESS to CSS and TS to JS, and convert between JSON, YAML, XML, CSV and TOML. Nothing is ever uploaded to a server, and the built-in PWA keeps working completely offline.

Why developers choose CodeFormat

Why consistent formatting is worth automating

Formatting is the layer of code style nobody should spend review time on. When indentation, quote style and line breaks are normalized mechanically, diffs shrink to the lines that actually changed, merge conflicts stop being fights over whitespace, and reading unfamiliar code gets faster because every file looks the same. That's the philosophy behind Prettier-style tools: instead of debating rules, you adopt an opinionated output and move on. A before/after makes the point — const x={a:1,b:[2,3],c:()=>x.a} is legal but hostile; formatted across four indented lines it reads at a glance. Minification is the same transform run in reverse priority: humans out, bytes out — strip whitespace, shorten what's safe to shorten, and ship the smallest payload to production while keeping the formatted source for people.

For jobs beyond formatting, the suite has dedicated workspaces: JSON Studio to explore and query payloads, Diff Checker to compare two versions of a file, Word Counter for prose, and ConvertAll when the whole file needs to become another format.

Step-by-step: formatting, minifying and converting code

Start with the Source Language dropdown. Leave it on Auto-Detect and the input is classified from its syntax — a badge in the input panel header tells you what was detected — or pick the language explicitly when a snippet is ambiguous, such as a CSS block that also parses as SCSS. Paste code into the left Monaco editor, drag a file onto it, or click Upload; Sample loads a representative snippet for the current language if you want to see the output style before using your own. Then choose an action tab: Beautify, Minify or Convert To…, which reveals a target menu that depends on the source — SCSS, SASS and Less compile to CSS; CSS can be nested into SCSS or Less, or rewritten as Tailwind @apply rules; TypeScript and CoffeeScript become JavaScript; ES6+ can be down-levelled to ES5; Markdown becomes HTML and HTML becomes Markdown or JSX; JSON converts to YAML, XML, CSV or TOML and each of those converts back to JSON.

Press RUN or hit Ctrl+Enter. The library badge above the editors names the engine that did the work — Prettier for web and config languages, Terser for JavaScript minification, sql-formatter for SQL, Sass.js, Less.js and Babel for the compilers — so you know exactly what produced the output. From the output panel you can Copy, Download as a file with the right extension, or Swap Panels to feed the result back into the input for a second pass, such as compiling SCSS to CSS and then minifying it. The divider between the panes is draggable when one side needs more room.

Real-world use cases

• Reading a minified vendor script. Paste a production bundle, beautify it, and the one-line blob becomes indented code you can actually search for the function that is throwing.
• Shipping a hand-written snippet. Minify the inline JavaScript or CSS for an email template or a CMS widget where no build step exists; Terser strips comments and whitespace and shortens local names safely.
• Migrating configuration. Convert a docker-compose.yml to JSON to inspect its structure, or a JSON export to TOML for a Rust or Hugo project, without writing a script.
• Porting markup to React. Convert a designer's HTML to JSX to get className, self-closing tags and camel-cased attributes handled mechanically.
• Tidying SQL for review. Format a long analytics query so keywords are upper-cased and each clause sits on its own line before pasting it into a pull request.

What the formatter does and does not change

Beautifying is a whitespace-and-punctuation transform. For Prettier-backed languages the output uses a two-space indent, an 80-column print width and semicolons; it re-wraps long expressions, normalises quotes and trailing commas, and otherwise leaves your program's meaning untouched. Because Prettier parses the code into a syntax tree first, input with a syntax error is rejected rather than silently reshaped — read the error message, fix the line it points to, and run again. For languages without a Prettier parser — Python, Go, Rust, Java, C-family languages, shell, TOML and INI — CodeFormat applies a lighter indentation-based pass, so it will tidy brace alignment and spacing but will not reorder imports or enforce a language-specific style guide the way gofmt or black would.

Minification is lossy by design: comments vanish, and JavaScript local variables are renamed, so keep the readable source under version control and treat the minified output as a build artefact. JSON minification simply re-serialises with no whitespace, which is ideal for embedding payloads but drops any comments a JSONC file contained. Converting between data formats can also lose information where the target has no equivalent — CSV flattens nested objects, XML has no native boolean or number types — so inspect the result when the structure is more than a flat list of records.

Further reading

Not sure whether a file should be minified or beautified before it is committed or deployed? Read minify vs beautify: when and why. If you are converting between JSON, CSV and spreadsheets, CSV, JSON and XLSX conversion pitfalls lists what gets lost in translation. Browse all guides for more.

Frequently Asked Questions