Code Formatter (TypeScript, Vue, Markdown & more)
Prettier for 18 languages — auto-detected, configurable, with a diff of every change.
Formatted code
The code has changed since this result — format again to update it.
About the Code Formatter (TypeScript, Vue, Markdown & more)
Paste code and format it with Prettier — the opinionated formatter used by most JavaScript and TypeScript projects — without installing anything. It covers the languages the other formatters on this site do not: TypeScript and TSX, Vue single-file components, Angular templates, Handlebars, Markdown and MDX, YAML, GraphQL, SCSS and Less, and JSON5 and JSON with comments, plus JavaScript, JSX, JSON, CSS and HTML.
The language is detected automatically (or from the file name), and you can set the usual Prettier options: print width, tabs or spaces, semicolons, quotes, trailing commas, bracket spacing, arrow parentheses, Markdown prose wrapping and HTML attribute layout. Changes shows a line-by-line diff of what Prettier changed. Formatting runs in a background thread in your browser, so large files never freeze the page and nothing is uploaded.
How to use it
- Paste code, drop a file or open one. Leave Language on Auto-detect, or pick the language yourself.
- Adjust Options if your project uses different Prettier settings (for example single quotes, no semicolons or 4-space indents).
- Press Format (or Ctrl/⌘ + Enter).
- Check Changes to review the diff, then Copy or Download the result.
Examples
const a = {b:1,c:[1,2,3]} ;function f(x: number): string {return `${x}`}const a = { b: 1, c: [1, 2, 3] };
function f(x: number): string {
return `${x}`;
}a: 1 b: [1,2]
a: 1 b: [1, 2]
query{user(id:1){name}}query {
user(id: 1) {
name
}
}Common uses
- Cleaning up TypeScript, React (TSX/JSX) or Vue code copied from a chat, a gist or documentation.
- Formatting GitHub Actions, Kubernetes or Docker Compose YAML before committing it.
- Tidying Markdown and MDX documentation tables and lists.
- Checking how Prettier would format a file with your team's settings, without setting up a project.
Languages and options
- Scripts: TypeScript, TSX, JavaScript and JSX — semicolons, quotes, trailing commas, bracket spacing and arrow parentheses apply.
- Data: JSON, JSON5 and JSON with comments (keys and quotes are kept as JSON5 allows).
- Styles: CSS, SCSS and Less.
- Markup: HTML, Vue single-file components (including
<script setup lang="ts">), Angular templates (*ngFor,@if, bindings) and Handlebars/Glimmer templates — attribute layout and whitespace sensitivity apply; Vue can indent<script>and<style>. - Docs and config: Markdown and MDX (prose wrap: keep, wrap or unwrap long lines) and YAML.
- GraphQL: queries, mutations and schema definitions.
Options are Prettier's own, with Prettier's defaults (print width 80, 2 spaces, semicolons, double quotes, trailing commas everywhere). Prettier version: 3.9.9 (MIT licence). Code inside Markdown fences in JavaScript, CSS or YAML is formatted too.
Other formatters
For JavaScript with more style choices (brace style, keeping array indentation) use the JavaScript Formatter; there are also dedicated formatters for CSS, HTML, SQL, JSON and XML, and a YAML Validator.
Limitations
- Prettier deliberately has few options; layout choices it does not offer (for example aligning colons) cannot be configured.
- Code must be syntactically valid to be formatted: Prettier stops at the first syntax error and shows where it is.
- Prettier plugins for other languages (PHP, Java, Svelte, Astro…) are not included.
- The first format of a language downloads Prettier (about 27 KB compressed) and the plugins that language needs — about 12 KB for GraphQL, 275 KB for TypeScript and 450 KB for Vue — after which it works offline.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
Is this the real Prettier?
Yes — Prettier 3.9.9's official browser build and plugins, the same code that runs in editors and on the command line, so the output matches npx prettier with the same options.
How do I match my project's .prettierrc?
Set the same values under Options: printWidth, tabWidth/useTabs, semi, singleQuote, trailingComma, bracketSpacing, bracketSameLine, arrowParens, proseWrap, singleAttributePerLine and htmlWhitespaceSensitivity. Your choices are remembered in this browser.
Why was my code detected as the wrong language?
Short snippets can fit several languages (a TypeScript type can look like JavaScript, a YAML file like Markdown). Pick the language from the list and format again; opening a file uses its extension, which is always right.
Is my code uploaded?
No. Prettier runs in a background thread of your browser. Only Prettier's own files are downloaded from this site the first time each language is used.