What a beautifier gives back, and what stays lost
Minifiers strip whitespace, shorten names, drop comments and sometimes rewrite control flow. A beautifier reverses exactly one of those steps. Indentation and line breaks come back. Your original variable names do not.
The practical result: function t(e,n){return e+n} becomes readable in shape but still tells you nothing about what e and n hold. That is normal, and worth knowing before you spend an hour reading a formatted bundle looking for names the build already deleted.
Four things this page will not do
- Restore identifiers. Mangled names stay mangled. A source map is the only route back, and you load those in DevTools, not here.
- Fix broken syntax. A stray bracket makes js-beautify guess at structure. Output looks odd instead of throwing. Run the JavaScript Validator when the formatted result reads wrong.
- Change behavior. Whitespace is cosmetic. Automatic semicolon insertion edge cases behave identically before and after.
- Handle whole frameworks comfortably. A 900 KB React bundle will format, then the editor scroll turns sluggish on modest hardware.
Read the diff between two indent choices
Presets are not decoration. Brace placement changes how quickly you spot a block boundary while scrolling. Compare the same snippet formatted two ways:
function total(items) {return items.reduce((sum, item) => {return sum + item.price;}, 0);}function total(items){return items.reduce((sum, item) =>{return sum + item.price;}, 0);}Collapse suits dense modern code where arrow callbacks nest three deep. Expand suits code review on a wide monitor, where a lone brace on its own line marks scope at a glance. Neither is correct in the abstract. Match whatever the repository already uses, because reformatting a file wholesale turns your next pull request into an unreadable wall of changed lines.
Reading a third-party bundle without guessing
The common reason people land here is debugging code they did not write. A workflow that saves time:
- Copy the minified file from the Network tab, not from view-source, so you get the exact bytes the browser ran.
- Format with 2 spaces and collapse braces. Fewer lines means less scrolling while you hunt.
- Search the formatted output for string literals. Minifiers rarely touch strings, so an error message or API path is the fastest anchor into unfamiliar code.
- Once you find the region, switch the wrap length to 80 so long ternaries break apart.
- Paste the section into the JavaScript Playground to run it in isolation.
Skipping straight to step three on unformatted code works too, but line numbers in your editor stop being useful when the whole file is line 1.
Options that actually change the output
- Keep existing blank lines
- On, the tool preserves up to two consecutive blank lines you wrote. Off, every blank line disappears. Turn it off for minified input, where blank lines are accidents rather than intent.
- Break chained method calls
- Puts each
.then()or.filter()on its own line. Useful for promise chains and array pipelines, noisy for short jQuery-style code. - Pad inside parentheses
- Writes
if ( ready )instead ofif (ready). A minority style. Leave it off unless a legacy codebase insists. - Wrap line length
- Breaks lines past the limit at safe points. Set 0 while reading unfamiliar code, since forced wrapping hides where a statement truly ends.
Where this sits against a real formatter
Prettier and ESLint run against a project config, respect ignore files, and rewrite files on save. This page formats a snippet in a browser tab. Use it for pasted code, bug reports, quick reads of a CDN script or a chunk of JSON-embedded JavaScript you got from a partner. Wire up Prettier for anything committed to a repository, because a shared config is the part that keeps a team consistent.
Formatting rules here come from js-beautify, the same library behind several editor plugins. It is a lexer-driven formatter, not a full parser, which is why it tolerates syntax it cannot fully understand and why unusual JSX or decorator syntax occasionally comes out indented in a way a parser-based tool would handle better.
Nothing leaves your browser
The editor, the formatter and the download button all run client side. No request carries your source to a server. Proprietary code, API keys accidentally left in a config object, internal endpoints: none of it transmits. Clear the panels anyway when you finish on a shared machine, since the text stays in the page until you reload.
