Is this the same Prettier my editor uses?

Yes, the real Prettier, running in the page. The output matches what your project would produce, which is the point - a formatter that almost agrees with your editor is worse than none.

Does it respect my project's .prettierrc?

No. It cannot see your project, so set the options here to match. Tabs, semicolons and trailing commas are the ones that usually differ.

Why did it refuse to format my file?

Prettier parses before it prints, so a syntax error stops it. The error points at where the parse failed, which is often a faster way to find a stray bracket than reading the file again.

Is my code sent to a server?

No. Prettier is downloaded to your browser and runs there, so a snippet from a private repository stays private.

What is the trailing comma setting for?

It controls where Prettier adds commas after the last item. ES5 puts them in arrays and objects only, All adds them to function arguments too, and None leaves them out - match whatever your codebase already does.

Stays on your computer How this works

Free online code formatter

Tidy JavaScript, CSS, HTML, JSON and more with Prettier — entirely in your browser

WidthIndentTabsSemicolonsSingle quotesTrailing commas

Input

Formatted

About this code formatter

Formats JavaScript, TypeScript, JSON, CSS, SCSS, Less, HTML, Markdown, YAML and GraphQL with Prettier — the same formatter most editors use, so the output matches what your project would produce.

Useful when you are on a machine without your editor set up, or tidying a snippet from somewhere else before pasting it in. It is free to use, with no account and no upload limit, and it runs entirely in your browser: nothing is uploaded, and while the page stays open, a feature you have already used keeps working offline.

What you can do

Format JavaScript, TypeScript and JSON with Prettier
Format CSS, SCSS and Less
Format HTML, Markdown, YAML and GraphQL
Set the line width, indent size, tabs or spaces, semicolons and single quotes
Choose trailing commas: all, ES5 only, or none
Open a code file from disk, with the language picked from its extension
Shows where parsing failed when the code has a syntax error
Copy the result, download it as a file, or format it again with Use as input

How to format code

Paste the code in, or use Open file to load it from disk.
Pick the language. Set the options you care about - tabs or spaces, semicolons, and how far to take trailing commas.
Press Format.
Copy the result, download it, or send it back round with Use as input.

Questions

Is this the same Prettier my editor uses?: Yes, the real Prettier, running in the page. The output matches what your project would produce, which is the point - a formatter that almost agrees with your editor is worse than none.
Does it respect my project's .prettierrc?: No. It cannot see your project, so set the options here to match. Tabs, semicolons and trailing commas are the ones that usually differ.
Why did it refuse to format my file?: Prettier parses before it prints, so a syntax error stops it. The error points at where the parse failed, which is often a faster way to find a stray bracket than reading the file again.
Is my code sent to a server?: No. Prettier is downloaded to your browser and runs there, so a snippet from a private repository stays private.
What is the trailing comma setting for?: It controls where Prettier adds commas after the last item. ES5 puts them in arrays and objects only, All adds them to function arguments too, and None leaves them out - match whatever your codebase already does.