JavaScript beautifier - format JS in your browser
JavaScript is the language that arrives at a beautifier in the saddest state most often. The production minifier emitted `app.min.js` as one screen-wide line. You copied a snippet from Stack Overflow with 6-space indents. The intern committed to a PR with tabs mixed with spaces.
This beautifier uses Prettier (Gentle mode) - the same library you install with `npm install prettier`. The full Babel parser handles modern JS: arrow functions, async/await, destructuring, spread, optional chaining, template literals, generators. For minified production code switch to Aggressive mode (js-beautify) - every statement on its own line, chained calls expanded, `if (x) return;` broken into 3 lines.
Accepts `.js`, `.mjs`, `.cjs` files. Defaults: 100-char width, single quotes, semicolons, trailing commas - i.e. the ESLint/Prettier defaults for modern JS in 2026.
How to use it
- Pick a mode (Gentle / Aggressive / Cosmetic-only) or keep the default.
- Paste your code into the left panel, or use "Upload file".
- Tune settings (gear icon): indent, width, quotes, semicolons.
- Click Format - first click takes a moment (libraries lazy-load).
- On the right you get the output with syntax highlighting - copy, download, or open in new tab.
When this is useful
Five typical JS situations:
- Pretty-print a DevTools minified file. You opened `app.min.js` in production, it is one line - paste, Aggressive, you get a readable structure (no original names, but at least you can follow the control flow).
- PR review. Junior pushed 200 lines without spaces around operators. Paste, Gentle, copy with 2-space indent.
- Copied from a blog / Stack Overflow. Pasting from HTML lost the indent. Prettier rebuilds it from semicolons and brackets.
- Tabs-to-spaces conversion. `.editorconfig` says 2 spaces but somebody committed tabs. Cosmetic-only, 2 spaces.
- Pre-commit fix. ESLint says formatting is wrong. Paste here, copy out, paste back into the file, lint passes.