How to use the JavaScript formatter
- 1Paste your code into the JavaScript box, or press Example to load a minified sample.
- 2Choose Indent (2 spaces, 4 spaces or tabs), Braces and Wrap lines at. Tick Break chained methods for long
.then()chains. - 3Press Format JavaScript (or Ctrl + Enter). The result appears in Formatted JavaScript with the before and after line count.
- 4Press Copy or Download to save
formatted.js.
Example
function greet(name){if(!name){return"Hello, stranger"}return"Hello, "+name+"!"}function greet(name) {
if (!name) {
return "Hello, stranger"
}
return "Hello, " + name + "!"
}Indent: 2 spaces, Braces: Same line. The formatter adds line breaks and spaces only; it doesn't add the missing semicolons.
Formatting options
| Option | What it changes |
|---|---|
| Indent | 2 spaces (common in JavaScript projects), 4 spaces, or tabs |
| Braces | { on the same line as if/function (the usual JavaScript style), on a new line, or short blocks kept on one line |
| Wrap lines at | Breaks long expressions near 80 or 120 characters; off by default |
| Blank lines | Keeps up to one or two blank lines you already had, or removes them all |
| Break chained methods | Puts each .then(), .map() or jQuery call on its own line |
| Decode \x and \u escapes | Rewrites "\x48\x69" as "Hi", which helps when reading obfuscated scripts |
The formatter only changes whitespace and line breaks (plus escapes, if you ask). It doesn't change quotes, add semicolons or rename anything.
Unminifying code
A minifier removes whitespace and comments and usually renames local variables to single letters. Formatting puts the structure back: one statement per line, nested blocks indented, operators spaced. What it can't restore is information that was deleted: comments, the original names of local variables (e stays e), and any code a compressor folded together, such as if statements turned into a ? b : c expressions.
If the site publishes source maps (a //# sourceMappingURL= comment at the end of the file), your browser's developer tools can show the original source, names included. That is the only reliable way to get them back.
Formatting vs linting
A formatter decides layout: indentation, line breaks, spaces. A linter such as ESLint checks meaning: unused variables, == where you meant ===, missing await. Formatting never fixes a bug, and a linter doesn't care about indentation unless you configure it to.
In a project, let one tool own formatting (Prettier is the common choice) and run it on save, so diffs only show real changes. This page is for code you don't control: a minified library, a snippet from a forum, a script inside an HTML page.
JSON and TypeScript
JSON is valid JavaScript syntax, so it formats here, but the JSON viewer is better for data: it validates against the JSON standard, points to the exact line of an error and shows a collapsible tree.
The beautifier works on JavaScript tokens rather than a full TypeScript parser. Simple type annotations usually come through unchanged, but generics, decorators and JSX can be laid out oddly. Format TypeScript and React files with Prettier or your editor's built-in formatter.
Is my text private?
This tool runs entirely in your browser. Your text is not uploaded to our servers.