Prettier Formatter Online

About this tool

Choose the language, paste your code and get it formatted by Prettier 3, the same formatter that runs in most editors and projects, so the result matches what your team's tooling will produce. It handles TypeScript and TSX, JavaScript and JSX, JSON, YAML, Markdown, GraphQL, CSS, SCSS, Less and HTML. You can set the line width, spaces or tabs, semicolons, single or double quotes, trailing commas and how Markdown prose is wrapped. Each language's parser is loaded the first time you use it (TypeScript is the largest, around 900 KB), so the page starts quickly. We compared the output with Prettier running in Node on 53 files of different kinds from this site's own source and documentation: every result was identical, and the cases where Node Prettier itself changes its own output on a second pass behaved the same here. If your code has a syntax error the tool says where, instead of guessing. Prettier decides the layout itself and has few options by design: if you want a different style, such as the output of the JS formatter on this site, use that tool. Your code never leaves your browser. Your code is formatted in your browser and never uploaded.

How to use it

1. Choose the language.
2. Paste your code.
3. Adjust the options if your project uses different ones.
4. Copy the formatted result.

Common problems

It says Could not format

The code has a syntax error or the language is wrong. The message names the line and column of the first problem.

The result differs from my editor

Your project may have a .prettierrc with other options (width, quotes, commas). Set the same values here. Prettier plugins used by your project are not available.

It is slow on a big file

Prettier runs in your browser and parsing TypeScript takes time. Files over 500,000 characters are refused; format a smaller part.