WebToolVerseWebToolVerse

Code Formatter

Processed locally · Never leaves your browser

Beautify or minify JavaScript, HTML, CSS, YAML, and SQL. Configurable indent. All processing is local.

Indent
Input
Output
Runs entirely in your browser — nothing is uploaded

Next steps

JSON Formatter

Instantly format, validate, or minify JSON — spot errors in seconds.

YAML Formatter

Format, validate, and convert YAML — with JSON ↔ YAML conversion.

Diff Checker

Spot every change between two texts with side-by-side highlighting.

Regex Tester

Write and test regex patterns with real-time match highlighting.

View all tools →
Runs entirely in your browser. No uploads. Your files stay private.

What Is a Code Formatter?

A code formatter rewrites source files using a deterministic set of style rules - indentation, line breaks, spacing around operators, brace placement - so that the same logical code always produces the same canonical text. The point isn't aesthetics; it's eliminating bikeshedding in code review and ensuring diffs only show actual logic changes.
This tool combines several mature, single-purpose libraries instead of one monolithic formatter. JavaScript, HTML, and CSS go through js-beautify, the same engine that backs the original Online JavaScript Beautifier from 2007 and the Beautify VS Code extension. JavaScript minification routes through Terser, the modern fork of UglifyJS used by Webpack 5 and Rollup. YAML round-trips through js-yaml (the YAML 1.2 reference implementation for JavaScript), which parses your input into a JS object then re-dumps it with the requested indent. SQL uses a small in-house formatter that uppercases keywords and breaks before the major clauses.
Everything runs in your browser via WebAssembly-free JavaScript bundles, so there is no server round-trip and no risk of leaking proprietary code to a third-party API. The libraries together add roughly 250 KB gzipped to the page; once loaded they work offline indefinitely.
Beautify is a pure pretty-printer: it never changes meaning, only whitespace and the canonicalization of optional syntax (semicolons, quote style, brace position). Minify, by contrast, runs a real compiler pass. Terser parses the source into an AST, applies dead-code elimination and constant folding, mangles local variable names down to one or two characters, and re-emits the smallest equivalent string. The output behaves identically but is typically 30-60% the size of the input and unreadable by design.
Two practical caveats. First, js-beautify is a syntactic formatter, not a parser - it tolerates broken JavaScript and will happily reformat it without warning, so always run your linter or TypeScript compiler afterwards. Second, the YAML round-trip is lossy for comments: js-yaml does not preserve them, so beautifying a heavily-commented config will strip your annotations. For comment-preserving YAML formatting, edit the file by hand or use a yamlfmt-class tool.
Indent-size choice (2 vs. 4 spaces) follows project convention. Airbnb, StandardJS, and most modern JavaScript codebases use 2; Python (PEP 8), older Java codebases, and legacy enterprise SQL almost always use 4. Pick whichever matches the file you're pasting into so the output drops in cleanly without a follow-up reformat in your editor.
For minified JavaScript, Terser's default options here include compress (constant folding, dead-code elimination) and mangle (variable renaming). Property mangling and aggressive options like unsafe_arrows are deliberately off because they can break code that relies on reflection or specific function names - safer defaults for a one-shot web tool.

Common Use Cases

01

Cleaning up pasted snippets

Restore readable indentation to code copied from chat windows, PDFs, or Stack Overflow answers where formatting was lost.

02

Preparing JS for inline embedding

Minify a small helper script with Terser to drop directly into a <script> tag in HTML email or a server-rendered page.

03

Reformatting compressed CSS

Expand a single-line production stylesheet back to a multi-line layout for debugging the cascade in DevTools.

04

Tidying YAML configs

Re-emit a Kubernetes or GitHub Actions YAML file with consistent 2-space indent and stable key ordering before committing.

Frequently Asked Questions

JavaScript (beautify via js-beautify, minify via Terser), HTML and CSS (js-beautify), YAML (js-yaml), and SQL (a small built-in keyword formatter). Other languages can usually be approximated by treating them as JavaScript or HTML, but the output won't be syntactically aware.
Beautify changes only whitespace, quote style, and brace position - the AST is identical. Minify with Terser preserves runtime behaviour but renames local variables, eliminates dead branches, and folds constants. Both are safe in practice but always re-test minified bundles end-to-end before shipping.
No. js-beautify, Terser, and js-yaml all run as JavaScript inside your tab. The page makes zero network requests during formatting, so your proprietary code never leaves your machine.
Yes - 2 or 4 spaces. Tabs aren't exposed as a one-click option here because most modern style guides have settled on spaces, but you can find/replace leading 2-space groups with tabs in the output if your project still uses them.
Terser only compresses what you give it. If your input is already minified or contains large embedded data (Base64 images, dictionaries), there is little left to compress. Real production builds also gzip or brotli the output - apply that on top for an extra 60-80% reduction.
No. js-yaml parses YAML into a plain JavaScript object and dumps it back, which discards comments and original key ordering. If comments matter, edit YAML manually or use a comment-preserving formatter like yamlfmt or Prettier's YAML plugin in your editor.
It recognizes the common ANSI SQL set plus the most-used Postgres and MySQL keywords. Vendor-specific syntax (DuckDB pivots, BigQuery struct literals, T-SQL CTE quirks) may not break onto its own line - the formatter is best-effort, not a full SQL parser.
Yes - the minify path collapses whitespace between tags and strips comments. It does not, however, do safe inline-CSS minification or attribute reordering. For aggressive HTML minification in a build pipeline, use html-minifier-terser.
Terser parses to an AST, so genuinely invalid syntax (unterminated strings, mismatched braces) will produce a parse error. Run your input through a beautify pass first - the error message often makes the structural issue obvious.
Not directly. js-beautify treats JSX/TSX as JavaScript, which mostly works but can mis-align long JSX trees, and Terser does not understand TypeScript syntax. For TS/JSX projects, run Prettier and tsc as part of your normal build instead.

Advertisement