JS/TS Beautify/Minify

JavaScript Beautify and Minify: Quick Cleanup vs. Full Pipeline

JavaScript files exist in two states for most projects: the source you edit (readable, commented, well-spaced) and the bundle you ship (compressed, mangled, single line). The two are produced by different tools at different times. This tool handles the middle ground, quick reformatting of snippets and basic minification, without the configuration overhead of a full bundler.

When to Use This Tool vs. a Real Build Pipeline

Use this tool for:

• Reading minified third-party code. Open the prod bundle, paste, get readable code back.
• Cleaning up debug output. Console-logged JS objects or stack-trace code that needs to be reviewed.
• One-off formatting of a snippet you're about to paste into a doc, a code review comment, or a blog post.
• Bundling tiny inline scripts. A 30-line script in an HTML page, minify before inlining for slight size savings.

Use a real build tool (Vite, Webpack, esbuild, Rollup, Parcel) when:

• You have a project with imports across files.
• You need source maps.
• You want variable mangling for max compression.
• You need tree shaking (remove unused exports).
• You're using TypeScript and need types stripped (this tool only formats).

The Beautify Operation

The beautifier reads your code and re-emits it with:

1. Consistent indentation, 2 or 4 spaces (configurable). Tabs work but spaces are universal.
2. Line breaks after statements, semicolons, closing braces.
3. Spacing around operators, a + b not a+b.
4. Bracket placement, Allman vs. K&R style.
5. One statement per line, a();b(); becomes two lines.

The result is reviewable, diffable, debuggable JavaScript that respects the language's grammar.

The Minify Operation

The minifier reads your code and strips everything not needed for execution:

1. All comments (// line and /* */ block) gone.
2. All whitespace collapsed, a single space remains where needed for token separation, zero where not.
3. Newlines removed.

What this tool does NOT do (and a real minifier does):

• Variable mangling. Renaming isUserLoggedIn to a for 90% savings.
• Dead code elimination. if (false) { ... } removed entirely.
• Constant folding. const x = 60 * 60 * 24 precomputed to 86400.
• Property mangling. obj.veryLongPropertyName to obj.a (risky, only works with type info).
• Tree shaking. Removing exports nobody imports.

For real bundle minification, Terser, SWC, and esbuild combine all of these and produce dramatically smaller outputs.

Source Maps: The Bridge Between the Two

A source map links a minified file back to its original source. Modern build tools emit .map files alongside bundles. In Chrome DevTools, when you debug a minified file, the source map lets you see and step through the original source.

This tool doesn't generate source maps, it's a one-shot transform with no link back. If you minify here, you lose the connection to original source. For production code where you need to debug from logs (error stack traces), use a real build pipeline that emits source maps.

Reading Minified Production Code

A common reason to beautify is to understand a competitor's website, a third-party library you didn't bring in directly, or a bundle that's failing in production with a useless stack trace.

Workflow:

1. View page source or download the bundle.
2. Paste minified code into beautifier.
3. Read the structure: functions become readable, control flow becomes traceable.
4. If variables are mangled (a, b, c), rename them by hand based on usage context.

Browser DevTools have a built-in 'Pretty print' button (the {} icon in the Sources panel) that does the same thing. This tool is useful when you need to copy the result to a doc or share it with someone.

TypeScript Specifics

The tool handles TypeScript's extra syntax:

• Type annotations (: string, : number), passed through.
• Interfaces and type aliases, formatted with consistent indentation.
• Generics (<T>), preserved.
• Decorators (@Component({...})), formatted but require careful parsing.

Important: this tool does NOT compile TypeScript to JavaScript. If you paste TS, you get TS back (reformatted). To strip types and get runnable JS, use tsc, esbuild --loader=ts, or swc.

Configuration Defaults

The tool picks sensible defaults that match common style guides:

• 2-space indent (Airbnb, Standard JS style).
• Single quotes for strings (configurable to double).
• Semicolons at end of statements.
• K&R brace style (opening brace on same line).

These match Prettier's defaults, so output is close to what a Prettier-formatted file would look like. For exact Prettier behavior, run Prettier directly, this tool is faster but slightly less precise.

Common Workflows

1. Snippet cleanup. Paste a hand-written function with inconsistent spacing; get clean code to paste into your editor.
2. Bundle inspection. Download https://cdn.example.com/widget.min.js; beautify to see what it actually does.
3. Email/SMS-friendly minification. Some integrations want JS as a single line; minify and paste.
4. Quick comparison. Beautify two pieces of code with the same formatter to compare them visually without manual reformatting.
5. Inline script optimization. For a static HTML page with embedded <script>, minify the script body before deploying.

Privacy

Both operations run as JavaScript in your browser. Source code, IP-sensitive logic, internal algorithms, none of it is sent over the network. Open DevTools Network during a transform: zero outbound requests.

if(a)b();else c()

if (a) {
  b();
} else {
  c();
}

const Card=()=><div style={{padding:16,color:"red"}}>hi</div>;

const Card = () => (
  <div style={{
    padding: 16,
    color: "red"
  }}>
    hi
  </div>
);

const inc=n=>n+1;
const log=(...a)=>{console.log(...a);return a}

const inc = n => n + 1;

const log = (...a) => {
  console.log(...a);
  return a;
};