JS Beautify/Minify

Format or minify JavaScript and TypeScript with indentation and Terser

JS Beautify/Minify

Format or minify JavaScript and TypeScript code. Beautify adds indentation; minify uses Terser for production-ready compression.

Overview

The JS Beautify/Minify tool provides:

• Beautify — Basic indentation (2 spaces) for readability
• Minify — Terser minification with compression and mangling

Supports ES6+, TypeScript, JSX, and modern JavaScript syntax.

Use Cases

Code formatting

Standardize JavaScript indentation for team consistency

Production builds

Minify JavaScript for deployment to reduce bundle size

Debugging minified code

Beautify vendor libraries or CDN scripts for inspection

Bundle optimization

Compress JavaScript with variable mangling and dead code elimination

Actions

Beautify

Adds basic indentation (2 spaces). Uses a simple algorithm that normalizes braces and semicolons.

Input:

function greet(name){return `Hello, ${name}!`;}

Output:

function greet(name) {
  return `Hello, ${name}!`;
}

The beautifier is regex-based and best-effort. For advanced formatting, use Prettier or ESLint.

Minify

Uses Terser for production-grade minification with compression and mangling.

Input:

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('World'));

Output:

function greet(o){return`Hello, ${o}!`}console.log(greet("World"));

Terser removes dead code, shortens variable names, and collapses whitespace.

Implementation Details

Beautify Algorithm

1. Normalize braces and semicolons to create line breaks
2. Split by newlines and track indentation depth
3. Increase indent after {, decrease before }
4. Join with 2-space indentation per level

Source: lib/tools/engine.ts:272-298

Key logic

function beautifyJs(js: string): string {
  const result: string[] = [];
  let indent = 0;

  const normalized = js
    .replace(/\s*\{\s*/g, ' {\n')
    .replace(/\s*\}\s*/g, '\n}\n')
    .replace(/;\s*/g, ';\n')
    .replace(/\n{2,}/g, '\n');

  for (const line of normalized.split('\n')) {
    const trimmed = line.trim();
    if (!trimmed) continue;

    if (trimmed.startsWith('}')) {
      indent = Math.max(0, indent - 1);
      result.push('  '.repeat(indent) + trimmed);
    } else if (trimmed.endsWith('{')) {
      result.push('  '.repeat(indent) + trimmed);
      indent++;
    } else {
      result.push('  '.repeat(indent) + trimmed);
    }
  }
  return result.join('\n');
}

Minify (Terser)

The minify action imports and runs Terser with compression and mangling enabled.

Source: lib/tools/engine.ts:536-542

Key logic

if (action === 'minify') {
  const { minify: terserMinifySync } = await import('terser');
  const out = await terserMinifySync(input, { compress: true, mangle: true });
  return { output: out.code || '' };
}

Minification is lossy — variable names are mangled, comments are removed, and whitespace is stripped. Always keep unminified source files.

Terser Options

The tool uses default Terser options:

• compress: true — Dead code elimination, constant folding, expression simplification
• mangle: true — Shorten variable and function names

For custom Terser configurations, modify the source code or use the Terser CLI.

Keyboard Shortcuts

• Cmd/Ctrl+Enter — Beautify (default)
• Cmd/Ctrl+Shift+C — Copy output
• Cmd/Ctrl+Shift+S — Download output

Related Tools

HTML Beautify/Minify

Format or minify HTML markup

JSON Format/Validate

Validate and format JSON

CSS Beautify/Minify

Format or minify CSS stylesheets