How to Beautify Minified or Messy JavaScript (Without Changing What It Does)

The problem: unreadable JavaScript

You open a third-party .min.js file, paste a snippet from a Stack Overflow answer, or inherit a codebase where someone ran a build step but never committed the source. What you get is a wall of code: no line breaks, inconsistent spacing, and everything crammed onto one line. Reading it is painful, and stepping through it in the debugger is worse.

A JavaScript formatter (or beautifier) fixes the shape of the code without touching its behavior. It re-indents blocks, puts statements on their own lines, and normalizes spacing around operators, braces, and commas so the structure becomes obvious again.

How beautifying actually works

A good beautifier does not use naive find-and-replace. It tokenizes the source into meaningful pieces (keywords, identifiers, strings, operators, brackets) and then re-emits them following consistent rules. Because it understands string and template literals, it will not "fix" spacing that lives inside a quoted string. The JavaScript Formatter on filemarkr uses the well-tested js-beautify engine, running entirely in your browser, so your code never leaves the page.

The key idea to internalize: formatting changes whitespace, not meaning. The parsed program before and after is identical. That makes it safe to run on code you don't fully trust yet.

A practical walkthrough

Say you pulled this minified line out of a bundle:

function total(items){let s=0;for(const i of items){if(i.qty>0){s+=i.price*i.qty}}return s.toFixed(2)}

Paste it into the formatter, choose a 2-space or 4-space indent, and you get back something you can actually read:

function total(items) {
    let s = 0;
    for (const i of items) {
        if (i.qty > 0) {
            s += i.price * i.qty;
        }
    }
    return s.toFixed(2);
}

Notice the added spaces around =, +=, and >, the newline after every statement, and the consistent block indentation. The logic is untouched.

Common pitfalls and tips

• Formatting is not fixing. A beautifier will not add missing semicolons in a way that changes automatic semicolon insertion (ASI) behavior, rename anything, or repair broken logic. If the input has a syntax error, clean it up first.
• Pick one indent width and stick to it. Mixing 2-space and 4-space files creates noisy diffs. Choose the width your project uses so the output drops in cleanly.
• Minified variable names stay minified. If a bundler mangled customerName into a, beautifying restores indentation but not the original names. You get readable structure, not the original source.
• Template literals are preserved. Multi-line strings inside backticks keep their internal whitespace, because collapsing them would change output.
• For team consistency, use a linter. A one-off beautify is great for reading code; for a repo you commit to, wire up a formatter in your build so style is enforced automatically.

When to reach for the reverse

Formatting is the read direction. When you are ready to ship and want the smallest possible file, run the opposite step with the JavaScript Minifier, which strips whitespace and shortens names to cut bytes. If you are cleaning up an entire front-end, the CSS Beautifier does the same job for stylesheets.

Conclusion

Beautifying JavaScript is one of those small tasks that saves real time: it turns an unreadable blob into something you can scan, debug, and reason about, without risking any change to behavior. Because it all runs locally in the browser, you can safely paste in proprietary or unreleased code. Format to read, minify to ship, and keep the two steps distinct in your workflow.