JavaScript Beautifier & Minifier

How to use the JavaScript Beautifier & Minifier

1. Paste JavaScript into the left panel, or open a .js file.
2. Pick Beautify to expand and indent it, or Minify to compress it with terser.
3. When minifying, decide whether variable names get shortened. When beautifying, set the indent and brace style under More options.
4. If the parser finds a mistake, the message names the line and column. Fix it and the output updates on its own.

Examples

function cartTotal(items,taxRate){let sum=0;for(const item of items){if(!item.inStock)continue;sum+=item.price*item.qty}return Math.round(sum*(1+taxRate)*100)/100}const basket=[{name:"notebook",price:4.5,qty:3,inStock:true},{name:"fountain pen",price:18,qty:1,inStock:false}];document.querySelector("#total").textContent=cartTotal(basket,.08).toFixed(2);

/*! tiny-debounce v1.0 | MIT */

// Waits until the caller has been quiet for `delay` ms before running `fn`.
export function debounce(fn, delay = 200) {
  let timerId = null;
  return function (...args) {
    if (timerId !== null) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
      timerId = null;
      fn.apply(this, args);
    }, delay);
  };
}

export function once(fn) {
  let called = false;
  let result;
  return function (...args) {
    if (!called) {
      called = true;
      result = fn.apply(this, args);
    }
    return result;
  };
}

const prices = { tea: 2.5, scone: 3 };

function total(order) {
  let sum = 0;
  for (const [name, qty] of Object.entries(order) {
    sum += prices[name] * qty;
  }
  return sum;
}

About this tool

Minified JavaScript is great for browsers and useless for people. The beautify mode uses js-beautify to turn a dense one-liner back into properly indented statements, with a newline after each one, consistent spacing around operators, and your choice of brace placement. Modern syntax such as classes with private fields, optional chaining, template strings and async functions is handled, and JSX tags can pass through untouched.

The minify mode runs terser, the same minifier most bundlers use, entirely inside your browser. By default it removes whitespace and comments, folds constant expressions, drops unreachable code and renames local variables to single letters. Names at the top level are preserved so that other scripts on the page can still call your functions; flip the top-level option for modules or self-contained scripts to save a little more. Licence comments that begin with /*! or contain @license are kept.

Because minifying requires a full parse, it doubles as a syntax checker. Instead of the raw parser message, you get a plain sentence describing what went wrong, the line and column where parsing stopped, and the offending line itself. Beautify mode is deliberately forgiving and will format incomplete snippets, so switch to Minify when you want the code checked.