JS/TS Formatter
Format JavaScript, TypeScript, JSX, and TSX with Prettier. Runs entirely in your browser.
PrettierJavaScriptTypeScriptUnlimited
Language
0 / 200,000
Try It Out
Format a Function
function greet(name){return"Hello, "+name+"!";}
Beautify an Object
const user={id:1,name:"Alice",age:30};
Clean Up JSX
<div><h1>Title</h1><p>Paragraph</p></div>
Tidy TypeScript
interface User{name:string;age:number;}const user:User={name:"Bob",age:25};
How to use
- Paste your code. JavaScript, TypeScript, JSX, or TSX.
- Pick a language. Controls which Prettier parser runs.
- Copy the formatted code. Prettier defaults, same as the npm tool.
Common use cases
- Formatting code snippets before pasting into docs
- Prettying one-off files without installing Prettier
- Sharing formatted code from your phone
- Cleaning up obfuscated or one-line bookmarklet code for inspection
Frequently asked questions
- Is this the same as the Prettier npm package?
- Yes. The page runs Prettier in the browser using its standalone build, with the same default options (2-space indent, single quotes for TypeScript, semicolons on, 80-character print width). Output should match what Prettier would produce locally on the same input.
- Which languages are supported?
- JavaScript (ECMAScript 2022+), TypeScript, JSX, and TSX. Pick the matching language to load the right Prettier parser. JSON, CSS, HTML, Markdown, and SQL each have their own dedicated formatter pages.
- Will it preserve my code comments?
- Yes. Single-line and JSDoc-style block comments are preserved. Prettier may move trailing comments to the next line if that produces cleaner output.
- Why are my single quotes getting changed to double quotes (or vice versa)?
- Prettier defaults to single quotes for TypeScript and double quotes for JavaScript. To match your project style, configure Prettier locally with the option you prefer; this online tool uses the default.
- Does this minify or transpile the code?
- No. The tool only formats whitespace and quote style. For minification, use Terser or esbuild. For transpiling between language versions, use Babel or tsc.
- Does my code get sent to a server?
- No. Prettier runs in the browser using its standalone build; nothing is uploaded.
Related tools
How to use
- Paste your code. JavaScript, TypeScript, JSX, or TSX.
- Pick a language. Controls which Prettier parser runs.
- Copy the formatted code. Prettier defaults, same as the npm tool.
Common use cases
- Formatting code snippets before pasting into docs
- Prettying one-off files without installing Prettier
- Sharing formatted code from your phone
- Cleaning up obfuscated or one-line bookmarklet code for inspection
Frequently asked questions
- Is this the same as the Prettier npm package?
- Yes. The page runs Prettier in the browser using its standalone build, with the same default options (2-space indent, single quotes for TypeScript, semicolons on, 80-character print width). Output should match what Prettier would produce locally on the same input.
- Which languages are supported?
- JavaScript (ECMAScript 2022+), TypeScript, JSX, and TSX. Pick the matching language to load the right Prettier parser. JSON, CSS, HTML, Markdown, and SQL each have their own dedicated formatter pages.
- Will it preserve my code comments?
- Yes. Single-line and JSDoc-style block comments are preserved. Prettier may move trailing comments to the next line if that produces cleaner output.
- Why are my single quotes getting changed to double quotes (or vice versa)?
- Prettier defaults to single quotes for TypeScript and double quotes for JavaScript. To match your project style, configure Prettier locally with the option you prefer; this online tool uses the default.
- Does this minify or transpile the code?
- No. The tool only formats whitespace and quote style. For minification, use Terser or esbuild. For transpiling between language versions, use Babel or tsc.
- Does my code get sent to a server?
- No. Prettier runs in the browser using its standalone build; nothing is uploaded.