Format and beautify JavaScript code with proper indentation.
The JavaScript Formatter beautifies JavaScript, JSX and TypeScript using Prettier, the formatter most teams use, with your choice of indentation, quotes, semicolons and line width. Syntax errors are reported with their line and column. Your code stays in your browser.
Made for developers. Typical uses:
A one-line script with a users array, a greet function and a forEach loop is expanded to one object per line, a function body on separate lines and the nested if indented two spaces further. Arrow-function parameters get parentheses, a trailing comma follows the last array item and every statement ends with a semicolon. The code behaves identically.
Prettier cannot format code that has syntax errors, so fix the reported problem first. It changes layout, not behavior; use the JavaScript Minifier to shrink code.
Accuracy: Output is tested against known inputs. For production code, review the result and run your own tests.
Expert Tip
Pick TypeScript in the language menu for files with types or generics, and JavaScript / JSX for plain scripts and React components. The wrong language is the commonest reason valid code is reported as an error.
The JavaScript Formatter beautifies JavaScript, JSX and TypeScript with Prettier, the formatter used by most teams. You paste the code, choose JavaScript or TypeScript, set the indent (2 spaces, 4 spaces or tabs), the line width (80, 100 or 120), whether to use single quotes and whether to end statements with semicolons, and press Format. The result can be copied or downloaded as formatted.js. The code never leaves your browser.
The tool's sample is a single line: a users array with two objects, a greet function that returns a template string, and a forEach loop with an if statement. With single quotes switched on, Prettier writes the array as one object per line, the function with its body on separate lines, and the loop with the nested if indented two spaces further, and ends each statement with a semicolon. Arrow-function parameters are wrapped in parentheses, and a trailing comma is added after the last array item. The behaviour of the code is identical.
Formatting changes only whitespace, line breaks, quotes and semicolons. It never renames variables, reorders statements or changes logic. That makes it safe to run on any file, and it is why teams use it to settle arguments over style. Prettier's style is deliberately limited: it gives you a few options, not dozens, so that the output looks the same across projects.
A common use is making a minified third-party script readable enough to debug. Paste it in and the structure returns, with every statement on its own line. Minification also shortens variable names to single letters, and no formatter can bring back the original names or the comments that were removed, so expect code that is readable in layout but not in meaning.
Prettier cannot format code that has syntax errors, so the tool reports the problem with a message and position instead of returning broken output. For example, an unfinished function declaration returns an "Unexpected token" message. Choose TypeScript in the language menu for files that use types, interfaces or generics, and keep JavaScript / JSX for plain scripts and React components. Selecting the wrong language is the commonest cause of errors on code that is actually valid.
To shrink code for production, use the JavaScript Minifier. To format data instead of code, the JSON Formatter, YAML Formatter and XML Formatter do the same job for those formats. To test a pattern before you put it in your code, use the Regex Tester. If your team already uses Prettier in its editor or build, choose the same indent, line width, quote style and semicolon setting here, so that code formatted in this tool does not create style-only changes in a pull request, and the diff shows only what really changed.
What minifying removes, how much it saves next to gzip and Brotli, and how to test minified CSS, JavaScript and HTML before you deploy it.
Explore more in Developer Tools, read the guides and articles, or see how we test our tools.
Minify and compress JavaScript code to reduce file size.
Best for reducing JS file sizes for faster page loading
Format, beautify, and validate JSON data with proper indentation.
Best for formatting minified JSON from APIs for readability
Format and beautify messy CSS code with proper indentation.
Best for beautifying minified CSS for editing
Format and beautify messy HTML code with proper indentation.
Best for beautifying minified HTML for editing
Test and debug regular expressions in real-time.
Best for testing regex patterns before using in code