JavaScript Beautifier: Un-Minify JS for Reading and Debugging
Minified JavaScript is compact but unreadable. This beautifier re-adds indentation based on brace depth, places each statement on its own line, and correctly handles strings, template literals, and comments — without changing any logic or variable names.
String and template literal contents are passed through unchanged. Comments are preserved in output (not stripped).
String-Aware Tokenizer
Naive line-splitting on ; or { would corrupt minified code where those characters appear inside string literals. The beautifier uses a state machine that transitions between code and string states, ensuring brace depth changes and semicolon line breaks only happen when reading actual code — not string contents.
Comments Are Preserved
Unlike the minifier, the beautifier keeps comments intact. Line comments (//) are placed on their own line. Block comments (/* ... */) are preserved as-is. This means minified code with embedded comments (JSDoc, license headers) comes through with those comments readable.
Limitations
The formatter adds newlines at { } and ; but does not wrap long lines, normalize quote styles, or add/remove trailing commas. For committed code, configure Prettier in your project. This tool is best for ad-hoc reading of minified code, reviewing production bundles, or understanding vendor scripts.
Practical Examples
Reading a Minified Vendor Script
Third-party scripts are often minified. Beautify to understand their structure.
- 1.Copy the minified JavaScript from the browser or a CDN file
- 2.Paste it here and select 2 or 4 space indent
- 3.The code is formatted with proper indentation
- 4.Browse the structure to understand what the script does
What the Formatter Does
- Adds newlines after { } and ;
- Indents code based on brace depth
- Preserves comments (unlike minifier)
- Handles strings, template literals, and nested arrow functions
Good Use Cases
- Making minified vendor scripts readable for debugging
- Un-minifying production bundles to trace a bug
- Reading generated JavaScript from build tools or frameworks
- Understanding third-party snippets before embedding them
Frequently Asked Questions
What does the JavaScript beautifier do?
It re-formats JavaScript by adding newlines and indentation based on brace depth. Each { increments the indent level and each } decrements it. Statements ending with ; are placed on their own lines. String literals and comments are passed through unchanged.
Does it handle arrow functions and modern JavaScript syntax?
Yes. Arrow functions, template literals, destructuring, and other ES6+ syntax are handled correctly. The formatter is indentation-based and works on any valid JavaScript syntax.
Will it change my logic or variable names?
No. Only whitespace structure (newlines and indentation) is changed. All identifiers, operators, and values remain exactly as in the input.
What is the difference between beautifying and formatting with Prettier?
Prettier applies opinionated style rules (quote style, semicolons, line length wrapping, trailing commas). This tool only adds indentation based on brace depth — useful for making minified code readable, but not a replacement for Prettier in a codebase.