JavaScript formatter
Format and beautify JavaScript with Prettier in your browser. Supports modern syntax and JSX, with 2-space, 4-space or tab indentation and clear syntax errors.
About JavaScript formatter
The JavaScript formatter reprints code with consistent indentation, spacing, line breaks and punctuation using Prettier, the formatter many JavaScript projects run in their editors and CI. Paste a minified bundle, a snippet from a forum or a script with mixed styles, choose 2 spaces, 4 spaces or tabs, and readable code appears.
Code is parsed with Prettier’s Babel parser, which understands modern JavaScript including classes, async functions, optional chaining, modules and JSX. Because formatting starts from a full parse, a syntax error is reported with the parser’s message rather than producing half-formatted code. Prettier loads only when you use the tool and runs in a background worker.
How to use JavaScript formatter
- Paste JavaScript into the input box, or open or drop a .js file.
- Choose 2 spaces, 4 spaces or Tabs for the indentation.
- Review the formatted code, or fix the syntax error shown in the status bar.
- Copy the code or download it as a .js file.
Features
- Formats with Prettier’s defaults: 80-character lines, double quotes, semicolons and trailing commas where valid.
- Supports modern syntax, ES modules, async/await, optional chaining and JSX.
- Keeps comments and does not rename variables or change logic.
- Indents with 2 spaces, 4 spaces or tabs.
- Stops with a syntax error message instead of guessing at broken code.
Common uses
- Reading minified third-party scripts to understand what they do.
- Cleaning up a snippet from a forum, blog post or chat before using it.
- Formatting code for documentation, slides or a bug report.
- Previewing how Prettier will format code before adding it to a project.
Frequently asked questions
Can it un-minify JavaScript?
It makes minified code readable again by restoring line breaks and indentation. It cannot restore original variable names or comments that a minifier removed, so short names like a, e and t remain. For your own code, source maps are the way back to the original.
Does it support TypeScript?
The tool is set up for JavaScript with Prettier’s Babel parser, not its TypeScript parser. Some TypeScript-only syntax may fail to parse or format unexpectedly, so format .ts files in your editor with Prettier’s typescript parser.
Can I change the quote style or line width?
No. Only indentation can be changed. Everything else follows Prettier’s defaults: double quotes, semicolons, trailing commas where valid and an 80-character print width. That matches projects that use Prettier without a configuration file.
Does formatting change what my code does?
No. Prettier parses the code and prints it again with different whitespace, line breaks, quotes, parentheses and semicolons. The program’s behavior is unchanged, and comments are kept.
Why do I get a syntax error?
Prettier must parse the whole input before printing it, so any syntax error stops formatting. Common causes are a missing bracket, a stray character copied from a web page, or a fragment such as a single object property taken out of a larger file. The message points to the problem.
Is my input uploaded?
Tools run in your browser. Files, text and results are not uploaded to our servers and are cleared when you leave the tool.
Your privacy comes first
Tools run in your browser. Files, text and results are not uploaded to our servers and are cleared when you leave the tool.