HCODX/Prettier Formatter
100% browser-based · Prettier 3 standalone

Prettier Code Formatter Online

The opinionated code formatter, in your browser. Supports JavaScript, TypeScript, JSX, JSON, CSS, SCSS, LESS, HTML, Vue, Markdown, and YAML. Auto-detects the parser from your input or pick one explicitly. All standard Prettier options exposed.

Drop a code file
.js, .ts, .jsx, .tsx, .json, .css, .scss, .less, .html, .vue, .md, .yaml, .yml
input
formatted
Beautify options
Input size
0 B
Output size
0 B
Lines added
0
Status
Ready
300K+
Files Beautified
2×
Faster to Read
35K+
Happy Developers
4.9 / 5
User Rating
Example

One opinionated tool, ten languages

Same input, same output, every time. Prettier's defaults are battle-tested across the JS ecosystem.

Messy JS input
const  x={a:1,b:2,c:3,d:4,e:5,f:6,g:7}
function   foo (a,b,c){return a+b+c}
const arr=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
After Prettier
const x = { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7 };
function foo(a, b, c) {
  return a + b + c;
}
const arr = [
  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
  20,
];
Use cases

What you'll use this for

Quick formatting before pasting into a PR, ad-hoc snippet cleanup, or running Prettier without installing anything.

One-off snippet formatting

Paste a Stack Overflow answer or a colleague's chat message and get back canonical Prettier output.

Try without installing

Test Prettier's output on your code before adding it to your project's tooling.

Tweak settings live

See exactly how each Prettier option (semi, single quotes, print width…) affects your code.

Multi-language

Same opinionated formatter for JS, TS, JSON, CSS, HTML, Markdown, YAML — one tool, consistent style.

Step by step

How to use Prettier

1

Paste or drop your code

Paste any of Prettier's supported languages, or drop a file. The parser auto-detects from the file extension.

2

Pick options

The defaults match Prettier's official defaults. Tweak print width, tab width, semi/quote/comma preferences as needed.

3

Click Format

Prettier 3 standalone runs locally. The right editor fills with the formatted result.

4

Copy or download

Copy to clipboard or save with the right extension for the chosen parser.

FAQ

Frequently asked questions

This page bundles plugins for: JavaScript / JSX (babel), TypeScript / TSX, JSON, CSS, SCSS, LESS, HTML, Vue single-file components, Markdown, and YAML. PHP, Ruby, Java, and Astro are not in this build — those need their own community plugins.

By looking at the input shape: starts with {/[ → JSON; <?xml or < → HTML; --- at top → YAML; @-rules with selector blocks → CSS; otherwise tries TypeScript first, then JavaScript. If detection guesses wrong, override the parser dropdown.

Because bike-shedding over formatting is a waste of time. Prettier offers a small set of options (~10) and picks reasonable defaults for the rest. Once your team adopts it, formatting debates disappear from PRs.

js-beautify is a permissive whitespace-only beautifier with many knobs. Prettier is a full re-printer: it parses the code into an AST and prints it from scratch using its own rules — strict, opinionated, language-aware. For new projects, Prettier is almost always the right answer; js-beautify shines when you need minimal changes to legacy code.

No. Prettier's standalone bundle and plugins are loaded from a CDN as static JS; everything runs in your browser.

About

About Prettier

Prettier is the de-facto code formatter for the JavaScript ecosystem and several other languages. It parses your code into an AST and re-prints it using its own opinionated rules, producing canonical output regardless of how the input was formatted.

The standard options

  • Print width (80) — wrap at this column when possible.
  • Tab width (2) — spaces per indent level.
  • Use tabs (false) — indent with tabs instead of spaces.
  • Semicolons (true) — add at statement ends.
  • Single quote (false) — prefer ' over " in JS.
  • Trailing comma (all) — multiline lists end with a comma.
  • Arrow parens (always) — even single-param arrows get parens.
  • Bracket spacing (true) — space inside { … }.
  • End of line (lf) — Unix line endings.

This page exposes all of those plus the parser selection. Other Prettier options (proseWrap, embeddedLanguageFormatting, etc.) use Prettier's own defaults.

What's not here

  • Plugin ecosystem. Prettier's community plugins (Astro, PHP, Ruby, Java, Solidity…) need their own browser builds; this page ships only the official plugins for the standard languages.
  • Editor integration. Use the official Prettier VS Code / JetBrains plugins for in-editor formatting on save.
  • Config file support. Each session is independent — there's no .prettierrc.