Code Beautifier (Prettier Online)
Format JS, TS, CSS, HTML, Vue, Markdown and more with Prettier. Runs in your browser.
About this code beautifier (prettier online)
This code beautifier runs Prettier in your browser to format JavaScript, TypeScript, JSX, CSS, SCSS, LESS, HTML, Vue, Markdown, YAML, GraphQL and JSON. Paste messy code, pick the language, and you get the same output the Prettier CLI would give with the same options.
Every option Prettier supports for that language is on the page: print width, tabs or spaces, semicolons, quote style, trailing commas, arrow parens, bracket spacing, HTML whitespace handling and more. When the result looks right, copy the matching .prettierrc so your editor and CI format the same way.
The code never leaves your tab. Prettier's parsers download once from this site, then everything runs locally, so you can format a private repo's files without pasting them into someone else's server.
Features
Real Prettier, not a lookalike
The page uses Prettier 3's own standalone build and its official language plugins. Output matches what `npx prettier --write` produces for the same settings, which matters when a teammate's CI check fails on spacing.
Thirteen languages from one box
JavaScript and JSX, TypeScript and TSX, CSS, SCSS and LESS, HTML, Vue single-file components, Markdown, YAML, GraphQL and JSON. HTML and Vue also format the CSS and JavaScript inside <style> and <script> tags.
Options that change with the language
Script options such as semicolons and trailing commas show for JavaScript-like code. Whitespace sensitivity and one attribute per line show for HTML and Vue. Prose wrap shows for Markdown and YAML. You only see settings that do something.
Copy-ready .prettierrc
The config box lists only the options you changed from the defaults, as JSON. Save it as .prettierrc in your project root and the CLI, VS Code and most editors pick it up.
Clear parse errors
Prettier refuses to format code it cannot parse. When that happens you see the line, the column, the source line with a caret, and a Go to error button that puts your cursor on the spot.
Small downloads, loaded on demand
Each parser is its own file. Formatting CSS loads the CSS parser only, about 240 KB with the core. TypeScript is the largest at a little over 1 MB, and the page tells you the size before it loads.
How to use the code beautifier (prettier online)
- 1Pick the language, then paste code or open a file.
- 2Set print width, indent and the Prettier options you want. The result updates as you type.
- 3Copy or download the formatted code, and copy the .prettierrc if you want the same style in your editor.
When to use it
Cleaning up a snippet before a code review
Paste a function someone sent in chat, format it with your team's settings, and review the logic instead of the indentation.
Matching a project's style without installing anything
On a borrowed laptop or a locked-down work machine, set the options to match the repo's .prettierrc and format files without npm.
Reading minified code
A bundled script or a one-line stylesheet becomes readable again. If you later need it small, the HTML, CSS and JS minifier reverses the trip.
Tidying docs and config
Markdown tables line up, lists get consistent markers, and YAML gets even indentation. For SQL, which Prettier does not cover, use the SQL Formatter.
What does a code beautifier actually change?
Only layout. Prettier parses your code into a syntax tree, throws away the original spacing, and prints the tree again under its own rules. Line breaks, indentation, quote style, semicolons, parentheses around single arrow parameters and trailing commas can change. Names, values and the order of statements do not.
That is why it needs valid code. A missing bracket means there is no tree to print, so you get an error instead of a guess. It is also why two people with the same options always get the same output, which ends most style arguments in code review.
Which Prettier options matter most?
Most teams change two or three settings and leave the rest. These are the ones that show up in real configs:
- printWidth (default 80): the line length Prettier aims for. 100 or 120 is common for TypeScript projects with long type names.
- tabWidth and useTabs (default 2 spaces): indentation. Tabs let each reader pick their own width.
- semi (default true): set it to false and Prettier only adds a semicolon where leaving it out would change the meaning.
- singleQuote (default false): 'single' instead of "double" quotes in JavaScript and CSS. JSX attributes have their own jsxSingleQuote switch.
- trailingComma (default all since Prettier 3.0): a comma after the last item in multi-line lists, which keeps diffs to one line when you add an item.
- objectWrap (default preserve): keeps an object on several lines if you wrote a line break after the opening brace. Collapse joins it when it fits.
How is this different from a minifier or js-beautify?
A minifier does the opposite job: it removes every byte the browser does not need. Beautifiers in the js-beautify family re-indent code token by token and keep many of your line breaks. Prettier reprints from the syntax tree, so it also rewraps long calls, normalizes quotes and adds or removes parentheses where the rules say so.
If you want your own line breaks kept and only the indentation fixed, js-beautify style tools fit better. If you want the whole team's code to look identical, Prettier is the usual choice.
How do I use the same settings in my editor?
Copy the .prettierrc from the box under the tool into a file with that name at the root of your project, then install Prettier there with npm install --save-dev prettier. In VS Code, install the Prettier extension and set it as the default formatter. Shift+Alt+F on Windows or Shift+Option+F on a Mac formats the open file.
Why use Mavros
| Mavros | Typical upload sites | |
|---|---|---|
| Formatter engine | Prettier 3 with official plugins | Often an older beautifier with its own rules |
| Where your code goes | Stays in your browser | Often posted to a server |
| Options | All Prettier options for the chosen language | Indent size and little else |
| Config export | .prettierrc with only the changed options | Not offered |
| Errors | Line, column, code frame, jump to error | A generic failure message |
Tips
- Press Ctrl+Enter (Cmd+Enter on a Mac) to format straight away instead of waiting for the live update.
- If formatting fails on code that runs fine, check the language. TypeScript syntax such as `as const` fails under the JavaScript parser, and JSX needs JSX or TSX selected.
- Prettier leaves a statement alone when the line above it is the comment `// prettier-ignore`. Use it for hand-aligned tables of numbers.
- Opening a file picks the language from its extension, so a .tsx file gets the TSX parser without you touching the menu.
- Turning JSON into types after formatting it? The JSON to TypeScript converter takes the same payload.
Questions
Is this the real Prettier?
Yes. It runs Prettier 3's standalone build with the official parser plugins, so the output matches the Prettier CLI for the same options. Nothing is reimplemented.
Does beautifying code change how it runs?
No. Prettier only changes whitespace, line breaks, quotes, optional semicolons and optional parentheses. Every name, value and statement stays the same.
Why does it say my code cannot be formatted?
Prettier formats only code it can parse. A missing bracket, a stray character, or the wrong language selected will stop it. The error shows the line and column; fix that spot or switch the language and it formats.
What is the difference between Prettier and ESLint?
Prettier decides how code looks; ESLint finds code that is likely wrong, such as unused variables or missing awaits. Most projects run both, with ESLint's formatting rules turned off so the two do not fight.
Can I format Vue or HTML with embedded CSS and JavaScript?
Yes. Pick HTML or Vue SFC and the content of <style> and <script> blocks is formatted with the CSS and JavaScript printers too. Untick Format embedded code to leave those blocks as they are.
What print width should I use?
Prettier's default of 80 suits most JavaScript. Many TypeScript teams use 100 or 120 because type annotations make lines longer. It is a target, not a hard limit, so long strings can still exceed it.
Is my code uploaded?
No. The parsers download from this site once and then run inside your browser tab. The code you paste is never sent anywhere, and the address bar stores only your option choices.
Does it support PHP, Python or SQL?
Not here. Prettier's core covers web languages; PHP and others need community plugins that are not bundled. For SQL, the separate SQL formatter on this site handles 20 dialects.