Tools
JavaScript Code Formatter
Paste your JavaScript code and click Format to clean it up with Prettier. Tab size and (for JS/TS) trailing semicolons are configurable. Switch languages from the toolbar.
About the JavaScript formatter
This tool reformats JavaScript source code, fixing indentation, quote style, spacing, and line breaks, without changing what the code does. Paste in code of any formatting quality, minified, inconsistently indented, mixed quote styles, and Format rewrites it into one consistent style. It understands JSX too, so React component markup formats correctly. Use the language tabs above the editor to switch to the TypeScript, JSON, or other formatters without leaving the page.
Formatting happens entirely in your browser. The page dynamically imports Prettier 3's standalone build plus only the plugins this language needs, babel to parse JavaScript into an abstract syntax tree and estree to print that tree back out, so this tab doesn't load the PHP or HTML plugins the other formatter tabs use. Prettier reprints the whole file from that parsed tree rather than patching the original text, which is why the output is identical regardless of how the input was originally formatted. Nothing you paste is sent to a server, logged, or stored.
Reach for this with a minified bundle you need to read, a snippet pasted from a chat or ticket with inconsistent indentation, or a file a teammate hand-formatted with the wrong quote style. It also settles formatting arguments in code review, since Prettier's output is the same for everyone. Only two options are exposed here, tab width and trailing semicolons; every other rule, including double quotes, an 80-character print width, and trailing commas, uses Prettier's default. Invalid JavaScript throws a SyntaxError naming the line and column instead of silently producing broken output.
Examples
// Before
function greet(name){if(name){console.log('Hello, '+name+'!')}else{console.log("Hello, stranger!")}}
// After (tab size 2, semicolons on — the defaults)
function greet(name) {
if (name) {
console.log("Hello, " + name + "!");
} else {
console.log("Hello, stranger!");
}
}Quotes are normalized to double quotes and every statement gets a trailing semicolon — verified output of this tool's Format button on the default settings.
// Before
const config = {name:'demo',retries:3,endpoints:['/api/users','/api/posts','/api/comments'],onError:function(e){console.error(e)}};
// After
const config = {
name: "demo",
retries: 3,
endpoints: ["/api/users", "/api/posts", "/api/comments"],
onError: function (e) {
console.error(e);
},
};Prettier's 80-character print width forces one property per line once the object no longer fits, and adds a trailing comma after the last property. Both are fixed behavior, not something the UI can turn off.
// Tab size: 4, Semicolons: unchecked
function greet(name) {
if (name) {
console.log("Hello, " + name + "!")
} else {
console.log("Hello, stranger!")
}
}Tab size and Semicolons are the only two settings this page exposes; every other Prettier rule keeps its built-in default.
Frequently asked questions
Does formatting change how my JavaScript behaves?
No. Prettier parses your code into an abstract syntax tree and reprints that same tree, so only whitespace, quote style, and line breaks change. It never renames variables, reorders logic, or fixes bugs.
Is my code uploaded to a server?
No. Formatting runs entirely in your browser — Prettier's standalone build loads client-side and never makes a network request with your source. Reload the page and whatever you pasted is gone.
What's the difference between this and a linter like ESLint?
Prettier only rewrites formatting: indentation, quotes, spacing, and line breaks. ESLint instead checks for actual problems, like unused variables or likely bugs, and doesn't reformat your file by default. Many projects run both together.
Can I format JSX or React components with this tool?
Yes. This formatter uses Prettier's babel parser, which understands JSX natively, so React component code formats the same as plain JavaScript. For TypeScript, use the TypeScript formatter tab instead.
Why did I get a SyntaxError instead of formatted code?
Prettier must fully parse your code into a syntax tree before it can reprint it, so invalid JavaScript, like a missing bracket or comma, throws a SyntaxError naming the exact line and column instead of guessing. Fix the reported spot and click Format again.