Code Formatter: Prettier in Your Browser
You're reviewing a PR and the CSS is a mess. Or you copied a JavaScript snippet from Stack Overflow and the indentation is inconsistent. Or you need to minify a TypeScript module before pasting it somewhere with a character limit.
This tool runs Prettier — the industry-standard code formatter — directly in your browser. It formats CSS, JavaScript, and TypeScript with the same rules used by most professional codebases. No install, no config file, no CLI.
Runs entirely client-side. Nothing leaves your machine.
What's actually happening
Formatting loads the appropriate Prettier plugins for the selected language:
- CSS — uses the PostCSS parser. Handles modern CSS including nesting, custom properties, and
@layer. - JavaScript — uses the Babel parser with the estree plugin. Supports ES2024 syntax.
- TypeScript — uses the TypeScript parser. Handles type annotations, generics, interfaces, and all TS-specific syntax.
Prettier parses your code into an AST (abstract syntax tree), then reprints it according to its formatting rules — consistent indentation, line breaks at logical points, trailing commas, semicolons, and quote normalization.
Minification strips comments, collapses whitespace, and shortens what it can without changing behavior. It's a lightweight minification — not as aggressive as Terser or esbuild, but good enough for quick size reduction.
Using it
Pick your language tab (CSS, JavaScript, or TypeScript). Paste your code. Hit Format for pretty-printed output or Minify for compact output. Copy the result.
Each language tab maintains its own state, so you can switch between them without losing your work.
When you'd actually reach for this
- You copied code from a tutorial or docs and the formatting is inconsistent with your project
- You're writing a code example for documentation and want it perfectly formatted
- You're debugging minified CSS and need to expand it to readable form
- You need a quick minification of a snippet for inline use (like an SVG data URI or bookmarklet)
- You're preparing code for a presentation or blog post and want it to look clean
Why Prettier specifically?
Because Prettier is opinionated by design. It doesn't give you 50 knobs to tweak — it makes formatting decisions for you. That means the output is consistent regardless of what the input looked like.
Other formatters (like ESLint's --fix or clang-format) are configurable to the point where teams spend hours debating settings. Prettier's philosophy is: stop arguing about formatting and let the tool decide. This tool embodies that — paste code, get formatted code, move on.
What Prettier changes (and what it doesn't)
It changes: indentation, line breaks, trailing commas, semicolons (adds them by default), quote style (double quotes by default), bracket spacing, and wrapping.
It doesn't change: variable names, logic, imports, or anything semantic. Your code behaves identically before and after formatting. It's purely cosmetic.
One thing that surprises people: Prettier sometimes reflows long lines in ways that look different from what you'd write by hand. A chain of method calls might get split across lines differently. This is intentional — Prettier optimizes for readability at its configured print width, not for matching your personal style.
Troubleshooting
Format button does nothing — check if your code has a syntax error. Prettier can't format code it can't parse. JavaScript with a missing bracket or CSS with an unclosed rule will fail. The error should appear in the output.
My TypeScript types disappeared — you might have pasted TypeScript into the JavaScript tab. Switch to the TypeScript tab. The Babel parser for JavaScript doesn't understand type annotations and will either error or strip them.
The output has semicolons but my project doesn't use them — this tool uses Prettier's defaults, which include semicolons. If you need no-semicolons style, you'll need to run Prettier locally with a config file. For a quick paste-and-copy, the semicolons don't affect functionality.
Minification removed something important — the minifier strips all comments, including /* eslint-disable */ directives, @ts-ignore, and /*! license */ preservation comments. If you need those, add them back after minifying.
CSS custom properties look different — Prettier formats custom properties consistently. --my-var:red becomes --my-var: red (with a space after the colon). Same behavior, different formatting.
What to do with it
Paste the formatted code back into your editor. For production minification, use a real build tool — Terser, esbuild, or SWC — which do proper dead code elimination, tree shaking, and mangling. The minification here is for quick one-off use, not build pipelines.
If you find yourself using this tool constantly, install Prettier in your project and configure format-on-save in your editor. It takes five minutes and saves hours over a project's lifetime.
Further reading: Prettier docs , Prettier playground, Prettier options.