A code beautifier that follows Prettier's rules
Paste a minified stylesheet, a one-line API response or a script that someone indented with a mix of tabs and spaces, and read it back in a single consistent layout. This code beautifier runs Prettier 3 in the page. It handles JavaScript (including JSX), JSON, CSS, SCSS, LESS and HTML.
Prettier does not copy your layout. It parses the code and prints it again from scratch with its own line-breaking rules. That is why two people who paste the same code with different spacing get the same output.
Paste, pick, copy: four steps
- Paste the code into the left box, or press Sample code to load an example for the selected language.
- Leave Language on Auto-detect, or choose one yourself. The tool shows which language it detected.
- Set Indent (2 spaces, 4 spaces or tab) and Print width (80, 100 or 120). Add quotes, semicolons, trailing commas and bracket spacing for JavaScript.
- Read the result on the right, compare the line counts, then press Copy or Download. The file is called
formatted.js,.json,.css,.scss,.lessor.html.
Which options still count for JSON, CSS and inline script
Options that make no sense for a language are switched off, and a line under the settings says which ones. JSON ignores quotes and trailing commas. CSS, SCSS and LESS ignore semicolons, trailing commas and bracket spacing, because the style rules fix them.
HTML is the odd one. Its own markup has no quote or semicolon setting, but the script and style blocks inside the page are formatted with your choices.
Why the output can differ from the input by more than spaces
Prettier is opinionated. With the default settings it changes single quotes to double quotes, adds missing semicolons and puts a comma after the last item of a multi-line list. You can turn each of these around in the options. It keeps comments. It does not rename, reorder or repair anything, so a bug in the input is still a bug in the output.
One habit surprises people in JSON and JavaScript objects: if the first key stands on the same line as the opening brace and the object fits in the print width, Prettier keeps it on one line. Put the first key on its own line and the object stays expanded.
Auto-detect, syntax errors and the 2,000,000 character cap
Auto-detect is a short guess, not a parser. Code that starts with < is HTML. Text that starts with a brace or bracket and parses as JSON is JSON. Text with rules like a { color: red; } and no function, const or => is a stylesheet, and SCSS or LESS variables pick those two. Everything else is JavaScript. Choose the language by hand when the guess is wrong.
When the code does not parse, you see the line, the column and the first line of Prettier's message. Input above 2,000,000 characters is refused. TypeScript, Vue and Markdown are not part of this tool.
What happens to the code you paste
The first time you format a language, the page loads the Prettier files it needs from this site. After that, the formatting runs locally, and your code is not sent anywhere. You can watch the network panel of your browser while you press a button. The tool only parses and prints the text. It never runs it. Copy uses the clipboard, and Download saves a file from the page.