Code beautifier - format 26 languages in your browser, nothing uploaded
You pasted source from a minifier and it is one line stretching across the screen. Or you copied a prettifier from a doc page and it has tabs instead of the spaces your project needs. Or it is just code from a colleague who "does not use a formatter" and has their own philosophy of indentation.
This code beautifier does what VS Code's "Format Document" button does: takes ugly, squashed or messy source code and gives it back nicely formatted, with syntax highlighting on the right.
It supports 26 languages, and 21 of them now get real formatters - not just an indent fix, but a full reformat. JavaScript, TypeScript, JSX, TSX, HTML, CSS, SCSS, LESS, JSON, YAML, Markdown and GraphQL run through Prettier 3+. C / C++ / Java / C#: the original **clang-format** compiled to WebAssembly - the same engine VS Code and Google use. Go: the canonical gofmt, in WASM. Python: **Ruff** (Black-compatible, the same engine `ruff format` runs in the terminal). Bash: shfmt in WASM. PHP: **Mago** in WASM. SQL: sql-formatter (UPPERCASE keywords, well-broken JOINs). XML: xml-formatter, respects DOM structure. Only Rust, Kotlin, Swift and Ruby stay on the cosmetic pass (brace-aware indenter for `{}`-languages, pure whitespace for Ruby) - their full formatters (rustfmt, ktlint, swift-format) need a toolchain that simply does not exist in the browser.
Three modes for three different needs: Gentle uses Prettier and only breaks lines when they exceed your width (100 by default). Aggressive uses js-beautify for JS/HTML/CSS - every statement on its own line, chained methods broken up, everything expanded. Cosmetic-only is our own ~50-line implementation - converts tabs ↔ spaces, normalises indent width, trims trailing whitespace, normalises CRLF → LF.
Everything runs locally in your browser. The code never leaves your machine - no upload, no telemetry, no server-side logs. You can drop your internet connection mid-session and the tool still works (after the first format - the libraries are cached then).
How to use it
- Pick a language in the top-left dropdown, or leave it on Auto - highlight.js will guess for you on every input change. Auto recognises the 26 supported languages so it will not confuse SQL with Python.
- Pick a mode: Gentle (default, breaks only over-wide lines), Aggressive (everything on its own line - JS/HTML/CSS only), Cosmetic-only (rewrites indentation + trims spaces, works everywhere).
- Paste your code into the left panel, or click "Upload file" - we accept up to 5 MB. All common extensions (.js, .py, .go, .rs, .java, ...) - on upload we detect the language from the extension automatically.
- Hit Format. The first click takes a moment - the libraries (Prettier, Shiki, highlight.js, js-beautify) lazy-load on demand ("Loading formatter..."). Subsequent clicks are instant because they sit in browser cache.
- On the right you get a syntax-highlighted preview (powered by Shiki - the same TextMate grammars VS Code uses). You can Copy, Download as a file (extension matched to the language), or Open in new tab (useful for long output).
- There is a gear icon (settings): indent width (tab / 2 spaces / 4 spaces), max line length (80/100/120), quotes (single / double), semicolons (on/off), trailing commas (all / es5 / none).
- Most languages now get a full reformat in the browser: C / C++ / Java / C# via clang-format (WASM), Go via gofmt (WASM), Python via Ruff (WASM, Black-compatible), Bash via shfmt (WASM), PHP via Mago (WASM), plus SQL (sql-formatter) and XML (xml-formatter). Full formatters lazy-load on first click (~80-300 kB WASM per language, cached after that). Rust, Kotlin, Swift, Ruby still get the yellow info banner and the Cosmetic-only mode (brace-aware indenter / pure whitespace).
- If your code has a syntax error (e.g. unclosed bracket), the right panel shows the exact error message with the line and column - same diagnostic you would see from the real Prettier in the terminal.
When this is useful
Six common situations where this code formatter saves you manual work:
- Pretty-printing a minified production file. You opened DevTools, found `app.min.js`, it is one line a mile long. Paste, Aggressive mode, you get readable source - not the full original (variables stay `_a`, `_b`), but at least you can see the structure.
- Cleaning up a colleague's PR. They pasted code that "works" but uses 6-space indents, tabs mixed with spaces, and 4 blank lines between functions. Gentle mode + 2 spaces + Prettier = code review stops shouting about whitespace.
- Converting tabs to spaces (or back). Your `.editorconfig` says 2 spaces, but the intern's code uses tabs. Cosmetic-only + 2 spaces does the conversion in one click, without touching the structure.
- Sanity-checking JSON or YAML. You pasted a GitHub Actions YAML and CI is shouting it is invalid - paste, Gentle, Prettier returns the error with line and column. Faster than reading the YAML spec.
- Beautifier for code copied from a PDF. You transcribed an example from a textbook / doc PDF and pasting lost the indentation (PDFs cannot copy whitespace reliably). Paste, Gentle, Prettier rebuilds the structure from semicolons and brackets.
- CRLF → LF conversion on Windows. A file from Windows opened on Mac/Linux has `^M` at the end of every line and git complains. Cosmetic-only normalises line endings to LF, leaving the rest untouched.