JS Beautifier / Minifier

Processed Client Side

Beautify or minify JavaScript code. Reformats structure with proper indentation or strips it down to the smallest size.

Input · 1 lines · 319 chars

1 lines · 319 chars

function fetchUser(id){return fetch('/api/users/'+id).then(function(res){if(!res.ok){throw new Error('HTTP '+res.status)}return res.json()}).then(function(data){const{name,email,roles}=data;return{id,name,email,isAdmin:roles.includes('admin')}}).catch(function(err){console.error('fetchUser failed:',err);return null})}

Length: 319Lines: 1Size: 319 BytesCursor: 1:1

Output

Beautified

function fetchUser(id) {
  return fetch('/api/users/' + id).then(function (res) {
    if (!res.ok) {
      throw new Error('HTTP ' + res.status)
    }
    return res.json()
  }).then(function (data) {
    const { name, email, roles } = data;
    return { id, name, email, isAdmin: roles.includes('admin') }
  }).catch(function (err) {
    console.error('fetchUser failed:', err);
    return null
  })
}

function fetchUser(id) {
  return fetch('/api/users/' + id).then(function (res) {
    if (!res.ok) {
      throw new Error('HTTP ' + res.status)
    }
    return res.json()
  }).then(function (data) {
    const { name, email, roles } = data;
    return { id, name, email, isAdmin: roles.includes('admin') }
  }).catch(function (err) {
    console.error('fetchUser failed:', err);
    return null
  })
}

Length: 402Lines: 14Size: 402 BytesCursor: 1:1

Keep comments

Bookmark this tool now — skip the search next time you need it.

About JS Beautifier / Minifier

This tool runs entirely in your browser. Whatever you paste is processed on your own device and is never uploaded, logged, or sent to any server.

The JS Beautifier and Minifier does the two things you need when handling unfamiliar JavaScript: expand it so you can follow it, or squeeze it so you can ship it. Beautify rebuilds indentation from the structure of the code, spaces operators and keywords consistently, keeps short object literals on one line, and breaks long ones by property. Minify strips comments and indentation but deliberately keeps a newline anywhere that removing it would change automatic semicolon insertion, so code written without semicolons still runs afterwards. Strings, template literals with nested expressions, and regular expressions are recognised as whole tokens and passed through untouched. Both modes run as you type, in your browser.

Key features

Beautify and minify from one toggle, with the output updating on every keystroke
Structure-aware indentation for blocks, objects, arrays, classes, and switch cases
Short object literals and destructuring stay on one line; long ones break by property
Consistent spacing around operators, keywords, arrow functions, and ternaries, with prefix and postfix operators left tight
Regex literals, template literals with nested placeholders, and strings pass through character for character
Comments can be kept or dropped when beautifying, and blank lines you left between statements are preserved
Minify keeps newlines exactly where semicolon-free code needs them, so the result still parses
Two-space, four-space, or tab indentation, with syntax highlighting in both panes
Runs entirely in your browser, so nothing you paste is uploaded

How to use it

Choose Beautify or Minify with the toggle in the toolbar.
Paste your JavaScript into the left pane.
For Beautify, pick the indentation width and decide whether to keep comments.
Read the result on the right, which re-runs as you edit.
Copy the output with the button on the right of the toolbar.

Tips & common mistakes

Beautify is the fast way into a minified bundle. Variable names stay mangled, because nothing can bring those back, but the structure becomes readable immediately.
Minify here is whitespace and comment removal only. It does not rename variables, drop dead code, or tree-shake, so expect a smaller saving than Terser or esbuild in a real build step.
Comments are always removed when minifying, licence headers included. Keep those somewhere else if the licence requires them to ship.
The formatter never inserts or removes semicolons. It lays out the code you gave it and nothing more, which is why minified output stays safe for semicolon-free source.
It is a formatter, not a compiler, so it will happily format code that does not run. Output that indents oddly usually means an unbalanced brace or an unterminated string earlier in the file.
TypeScript annotations and JSX are treated as ordinary tokens rather than understood, so use Prettier locally for those files.
Chained calls stay on one line rather than one call per line. That is a layout choice here, not something wrong with your input.

Browse all 10 Code tools

Frequently asked questions

Leave the toggle on Beautify, paste your code into the left pane, and the formatted version appears on the right as you type. Choose two spaces, four spaces, or tabs, decide whether to keep comments, and copy the result.

Yes. Switch the toggle to Minify and the same code comes back with comments and indentation stripped. Switch back to Beautify at any time to make it readable again.

Yes. The minifier keeps a newline wherever removing it would change what automatic semicolon insertion does, so semicolon-free code still parses the same way after minifying. That is the difference between shrinking code and breaking it.

On commented, indented source it typically removes a third or so of the characters. A production minifier such as Terser or esbuild goes much further because it also renames variables and removes unreachable code, which a whitespace-level tool deliberately does not do.

No, it applies to Beautify only. Minify always removes every comment, licence headers included, so keep those somewhere else if you need to ship them.

Arrow functions, classes, async and await, destructuring, spread, optional chaining, nullish coalescing, template literals with nested expressions, and regex literals are all recognised and formatted correctly. It is a formatter rather than a full parser, so extremely unusual code may lay out imperfectly even though it stays valid.

Not reliably. Type annotations and JSX tags are treated as ordinary tokens, so the output usually still runs but rarely looks right. Use Prettier locally for those files.

It restores the layout, not the names. Beautifying a minified bundle makes the control flow readable in seconds, but variables shortened to a and b stay that way, because the original names are not in the file any more.

No. Beautify only adds and removes whitespace, minify also removes comments, and neither mode ever inserts or deletes a semicolon or reorders anything. Your strings, template literals, and regular expressions are copied through untouched.

No. Everything runs in your browser, which is what makes it safe to paste a snippet from a private codebase. Nothing is sent to a server or stored.

About JS Beautifier / Minifier

Key features

How to use it

Tips & common mistakes

Related tools

Frequently asked questions