FREE · DEVELOPER TOOLS
Code Formatter (Prettier).
Format JavaScript, TypeScript, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Markdown, YAML and GraphQL with Prettier in your browser, with live preview.
Formatting engine: Prettier 3 (MIT), running in your browser. Formatting changes layout only, never what the code does; comments are kept.
How to use Code Formatter (Prettier)
Paste code or open a file; the language is detected and the formatted version appears as you type. Adjust line width, indentation, semicolons, quotes and trailing commas, then copy or download.
How it works
Uses Prettier 3 standalone (MIT) with only the parsers the chosen language needs, loaded on demand in your browser. Same output rules as Prettier on the command line for the options shown.
Example
const a={b:1,c:[1,2,3]};function f(x){return x*2} becomes const a = { b: 1, c: [1, 2, 3] }; followed by a function block indented with two spaces.
Format code with Prettier
- Paste your code in
Your code, or pressOpen a file. - Keep
Detect automaticallyor choose the language: JavaScript, JSX, TypeScript, JSON, CSS, SCSS, Less, HTML, Vue, Markdown, YAML or GraphQL. - Adjust the line width, indentation and, for JavaScript and TypeScript, semicolons, quotes and trailing commas. The result updates as you type.
- Press
Copy result,DownloadorReplace my code.
Example: const a={b:1,c:[1,2,3]};function f(x){return x*2} becomes an object on one line followed by a function block indented with two spaces, each statement ending with a semicolon.
What formatting changes
Prettier rewrites spacing, line breaks, indentation, quotes and commas so the code follows one consistent style. It never changes what the code does, and comments are kept. If the code has a syntax error, nothing is formatted and the message gives the line and column, for example (1:10).
For one language with its own options, see the JSON Formatter or the SQL Formatter; to shrink JavaScript for production, use the JavaScript Minifier.
Questions about Code Formatter (Prettier)
Is my code uploaded?
No. Prettier runs in your browser, and only the parsers for the chosen language are loaded.
Is the output the same as Prettier on my computer?
Yes for the options shown here: it is Prettier 3 itself, without any project configuration file.
Why is my code not formatted?
The parser found a syntax error. Fix the line and column given in the message, or check that the right language is selected.
Is Code Formatter (Prettier) free, and do I need an account?
Yes. This tool is free to use in your browser without an account. Processing takes place on your device.
What are the limits and what should I check?
Files up to 2 MB. Code with syntax errors is not formatted; the error shows the line and column. Formatting changes layout only, never behaviour; comments are kept. Review the result before using it in your work.
Is my input sent to a server?
Your input is processed in your browser and is not uploaded by this tool. Files and pasted text are cleared when the page is refreshed. Normal website requests are still required to load the page and its libraries. Read the privacy explanation.