JavaScript Formatter & Beautifier
Free JavaScript formatter and beautifier: pretty-print JS and JSX with Prettier, set semicolons, quotes and width, then minify or syntax-check in the same page.
How to use JavaScript Formatter
- 1Paste your JavaScript or JSX, or open a .js file.
- 2Choose indentation, quote style, semicolons and print width. The result updates as you type.
- 3Copy or download the formatted code, or switch to Minify or Validate without losing your input.
What makes it better
- Prettier formatting with the options developers actually change: semicolons, single or double quotes, trailing commas, print width, tabs or spaces, arrow parentheses and bracket spacing
- JSX, ES modules, async functions and optional chaining are handled
- Syntax errors are reported with line, column and the offending line
- Minify and Validate modes sit on the same page and keep your input
- Inputs up to 20 MB, with large ones formatted in a background worker
About JavaScript Formatter
This formatter rewrites messy or minified JavaScript into consistent, readable code using Prettier's Babel parser, which also understands JSX and modern syntax. If the code has a syntax error it tells you the line and column instead of guessing. The same page can minify with Terser or run a syntax-only check, and your code is never executed.
Common uses
- Read a minified bundle snippet copied from a production page or a stack trace.
- Make a pasted code sample match your team's quote and semicolon style before a review.
- Check that a snippet from a tutorial actually parses before dropping it into a project.
- Clean up generated code from a template or a code generator so a diff is readable.
Example
Input
const greet=(name,greeting="Hello")=>{if(!name){return null}return greeting+", "+name+"!"};const users=[{name:"Ada",role:"admin"},{name:"Linus",role:"dev"}];users.forEach(u=>console.log(greet(u.name)))Result
const greet = (name, greeting = "Hello") => {
if (!name) {
return null;
}
return greeting + ", " + name + "!";
};
const users = [
{ name: "Ada", role: "admin" },
{ name: "Linus", role: "dev" },
];
users.forEach((u) => console.log(greet(u.name)));
Good to know
- Formatting only changes whitespace, quotes, parentheses and similar layout. Prettier never renames variables or changes behaviour, but comments and blank lines may move slightly.
- JSX is detected automatically, so there is no separate JSX switch. TypeScript syntax needs the TypeScript formatter page.
- Prettier's defaults here are not your project's .prettierrc; set the options to match it if you need identical output.
JavaScript Formatter FAQ
How do I format JavaScript online?
Paste the code into the box and the formatted version appears beside it. Adjust indentation, quotes, semicolons and print width in the option row if the defaults do not match your style, then copy or download the result.
Does the formatter support JSX and modern JavaScript?
Yes. Prettier's Babel parser reads JSX, import and export, async and await, classes, optional chaining and nullish coalescing. Decorators and some experimental proposals may be rejected, and TypeScript annotations belong on the TypeScript page.
Will formatting change what my code does?
No. Prettier reprints the same syntax tree with different whitespace, quotes and parentheses. Names, logic and string contents stay the same, although comments and blank lines can shift a little.
Why does it say my JavaScript is invalid?
The parser found something that is not legal JavaScript, such as a missing bracket, a stray comma or a reserved word used as a name. The message gives the line and column plus the line itself so you can fix it, and the result updates as you edit.
Is my code uploaded anywhere?
No. Prettier runs inside your browser tab, so snippets with internal URLs or keys stay on your device. The code is only parsed and printed, never executed.