JavaScript Beautifier

About this tool

Minified JavaScript is designed to be executed by machines, not read by humans. When you need a quick look at what a short third-party snippet does, or want to make a one-line minified function readable, a beautifier helps. This tool uses lightweight character-by-character heuristics rather than a full parser. When you click Beautify, it starts a new line after each statement-ending semicolon and after every opening and closing brace, indents block contents by 2 or 4 spaces, and adds a space after commas and colons. Strings, template literals, regular expressions and comments are copied unchanged. It does not add spaces around operators such as = or +, and it treats object literals and destructuring braces like code blocks. The Normalize semicolons option (on by default) appends a semicolon to lines that look like they end a statement; it can put semicolons inside object literals, so untick it for code that contains them. All processing runs in your browser with no server upload.

Why use it

• Quick Readability for Snippets: Breaks a one-line minified function into indented blocks and statements so you can follow the control flow without installing anything.

• Third-Party Script Auditing: Unminify a short script tag or analytics snippet to get a first look at what it does before trusting it.

• Strings and Regexes Left Alone: Quoted strings, template literals, regular expression literals and comments are copied character for character, so their contents are never reformatted.

• Choice of Indent Width: Pick 2 or 4 spaces to match the code you are pasting the result next to.

• No Install or Build Step: Available instantly in the browser without npm install, Prettier config, or editor plugins — useful on any machine, including read-only or restricted environments.

How to use

1. Paste your minified or concatenated JavaScript into the JavaScript input box.
2. Choose an Indent of 2 spaces or 4 spaces.
3. Leave Normalize semicolons ticked to append missing semicolons, or untick it if your code has object literals or destructuring.
4. Click Beautify to format the snippet.
5. Click Copy to copy the formatted JavaScript to your clipboard.
6. Paste the result into your code editor or a code review tool for further reading.

When it helps

• When debugging a production JavaScript error and the stack trace points to a minified bundle that cannot be read without formatting.
• When auditing a third-party tag manager script, analytics snippet, or ad network JavaScript to verify it does not contain unexpected behavior.
• When reviewing code in a pull request where a minified build artifact was accidentally committed alongside source changes.
• When inspecting the output of a bundler (Webpack, Rollup, Vite) to understand how your modules were combined and tree-shaken.
• When working on a machine without your usual editor or Prettier setup and needing to quickly format a script before reading it.
• When extracting and reading inline JavaScript from an HTML page's script tags that were minified by a site generator or CMS.

Examples

function add(a,b){return a+b;}const result=add(3,4);console.log(result);

function add(a, b) {
  return a+b;
}
const result=add(3, 4);
console.log(result);

const cfg={debug:true,level:2};

const cfg= {
  debug: true, level: 2
};

async function fetchUser(id){try{const res=await fetch(`/api/users/${id}`);if(!res.ok)throw new Error('Not found');return await res.json();}catch(e){console.error(e);return null;}}

async function fetchUser(id) {
  try {
    const res=await fetch(`/api/users/${id}`);
    if(!res.ok)throw new Error('Not found');
    return await res.json();
  }
  catch(e) {
    console.error(e);
    return null;
  }
}

Tips

• After beautifying, use Ctrl+F to search for specific function names or strings — formatted code makes keyword search far more useful than scanning minified output.
• Copy only the specific function or chunk you are investigating rather than the entire bundle — the heuristics work best on short snippets.
• Look for console.log statements in beautified third-party scripts — they are often left in minified code and reveal implementation details about what the script tracks.
• Use the 2-space output mode when preparing beautified code to show in documentation or a blog post — it is more compact and easier to read in narrow columns.
• Untick Normalize semicolons before beautifying code full of object literals, otherwise semicolons are appended after the last property.

Frequently Asked Questions

Glossary

Minification

The automated process of removing whitespace, comments, and shortening variable names in JavaScript to reduce file size for faster browser download. Produces code that executes identically but is unreadable.

Beautification (Pretty-Printing)

The reverse of minification — reformatting code with consistent indentation, line breaks, and spacing to make it human-readable. Also called code formatting or pretty-printing.

Obfuscation

A more aggressive transformation than minification that renames variables to meaningless names and encodes strings to make reverse-engineering difficult. Beautification cannot undo obfuscation.

AST (Abstract Syntax Tree)

A tree representation of the syntactic structure of source code. Full formatters such as Prettier parse code into an AST and re-serialize it; this tool uses lighter character-level heuristics instead.

IIFE (Immediately Invoked Function Expression)

A JavaScript pattern where a function is defined and immediately called: (function() { ... })(). Commonly used in bundler output to create isolated scopes.

Source Map

A file (.map) that maps minified/bundled output back to the original source files with original variable names and line numbers. Source maps make DevTools debugging of production bundles possible without a beautifier.