Code beautifier
Format HTML, CSS, JavaScript, TypeScript, JSON, Markdown, YAML and XML with Prettier, the formatter used in most web projects. Strings and comments stay intact, and invalid code is shown at the exact line.
- Parses the code, never breaks it
- Eight languages, detected for you
- Runs in your browser, nothing uploaded
Result
Paste code to start
- Code—Pasted or opened
- Language—Detected or chosen
- Parsed—Into a syntax tree
- Printed—With your options
Formatted code
Options
Changes apply at once.
JSON and XML have no options besides the indent.
Output
Press Format to see the result.
What a code beautifier does
A beautifier, or formatter, rewrites the spacing and line breaks of code so people can read it. A good one changes nothing else.
Parse, then print
Prettier reads the code into a syntax tree and prints it again from scratch, which is why it cannot break a string or a comment.
Search and replace breaks code
Rules such as "new line after every semicolon" also hit semicolons inside strings and regular expressions. That is how simple beautifiers change behaviour.
Formatting is not linting
A formatter fixes layout. Bugs, unused variables and security problems need a linter such as ESLint or Stylelint.
Readable for people, minified for browsers
Edit the formatted version; serve minified CSS and JavaScript on your live site, where every byte is downloaded.
Languages and how each is formatted
The engine behind each language, and what it changes.
| Language | Engine | What it does |
|---|---|---|
HTML |
Prettier (html) | Indents tags, formats inline CSS and JavaScript, respects whitespace that affects layout |
CSS, SCSS, Less |
Prettier (postcss) | One declaration per line, consistent spacing, quotes and colors as written |
JavaScript |
Prettier (babel) | Handles modern syntax, JSX, strings, regular expressions and template literals |
TypeScript |
Prettier (typescript) | Types, interfaces, generics and decorators |
Markdown |
Prettier (markdown) | Consistent lists, headings, tables and emphasis; text is not rewrapped |
YAML |
Prettier (yaml) | Indentation, lists and comments kept |
JSON |
Built-in, lossless | Every object and array expanded; numbers and strings copied exactly |
XML |
Built-in | One element per line, attributes and text kept; for sitemaps, RSS and SVG |
How to use this tool
From messy or minified code to readable code.
Paste or open code
Paste code, open a file, or try the example. The language is detected for you.
Check the language
If detection guesses wrong, pick the language yourself; TypeScript and JavaScript differ.
Format
Press Format. The result updates as you edit or change an option.
Copy or download
Copy the formatted code, download it with the right extension, or keep editing it.
What this tool does, and what it doesn't
A plain list, so you know exactly what to expect.
This tool does
- Format eight languages with Prettier or exact formatters
- Keep strings, comments and numbers intact
- Show syntax errors at their line
- Let you choose indent, width and quotes
- Detect the language and open files
- Run in your browser
This tool does not
- Upload your code anywhere
- Fix bugs or invalid syntax
- Restore names or comments a minifier removed
- Read your project's .prettierrc
- Format PHP, Python or SQL
- Minify code (use the code minifier)
Where your data goes
Nowhere. Your code is formatted in your browser and files are read on your device. The first time you format a language, your browser downloads the matching open-source Prettier files from cdn.jsdelivr.net; your code is not sent with that request. Like any website, our server keeps normal access logs of page visits, as described in our privacy policy.
Why your results might look unexpected
The six situations people run into most, and what each one means.
Syntax error, but the code works
Browsers forgive broken HTML; Prettier does not. Close the tag or bracket shown at the error line.
TypeScript fails as JavaScript
Type annotations are not JavaScript. Choose TypeScript in the language list.
Quotes changed
Prettier picks one quote style. Choose single or double quotes in the options.
Long lines were wrapped
Lines longer than the line width are split. Raise the width to 100 or 120.
Text in HTML moved
Spaces around inline elements can change how text looks, so Prettier keeps them. Use "Ignore whitespace" if you are sure.
Formatter did not load
An extension or network blocked cdn.jsdelivr.net. JSON and XML still work.
Questions about code formatting
Can a beautifier break my code?
A formatter that works with search-and-replace rules can: collapsing whitespace inside a string, or joining a line after a // comment, changes what the code does. This tool uses Prettier, which reads the code into a syntax tree first and only changes spacing, line breaks, quotes and optional semicolons. The code means the same thing afterwards. Still, test formatted code before you deploy it.
Why does it show a syntax error instead of formatting?
Prettier can only format code it can read. A missing bracket, an unclosed string or a stray character stops it, and the tool shows the line and column where reading failed, with the lines around it. Fix that spot and the code formats. Choosing the wrong language, such as JavaScript for TypeScript, causes the same error.
Is my code uploaded to your server?
No. Formatting runs in your browser. The first time you format a language, your browser downloads the matching Prettier files from cdn.jsdelivr.net; your code is not sent there either. Files you open are read on your device. Like any website, our server keeps normal access logs of page visits, as described in our privacy policy.
Which options should I choose?
Match your project. Two spaces and a line width of 80 are Prettier's defaults and common in web projects; many PHP and Python teams use four spaces. Quotes, semicolons and trailing commas only change style, not behaviour. If your project has a .prettierrc file, use the same settings here so the formatting matches.
Does it format minified code?
Yes, as long as it is valid. Minified CSS, JavaScript, JSON and HTML are expanded into readable lines. Variable names that a minifier shortened to a or b stay short, because a formatter cannot know the original names, and comments removed by the minifier do not come back.
Why are JSON and XML handled differently?
They use the tool's own formatters, which put every object, array or element on its own line and copy each value exactly as written. That keeps very large numbers, such as 64-bit IDs, from being rounded, which can happen when JSON is read as JavaScript numbers. JSON with comments or trailing commas is reported as invalid, because standard JSON does not allow them.
Should I upload formatted code to my live site?
For CSS and JavaScript that browsers download, usually not: formatting adds spaces and line breaks that make files larger. Keep the readable version for editing, and minify for production, or let your build tool or caching plugin do it.