Beautify JavaScript Online — Free JS Beautifier

Beautify JavaScript code instantly with our free online tool. Format JS with consistent indentation and customizable options. All processing happens in your browser.

Loading…

JavaScript Beautification

Beautify JavaScript online. Format JS with consistent indentation — instant browser processing, no uploads.

Features

Format and beautify your JavaScript code with customizable indentation (2 or 4 spaces, or tabs).

Beautify

Format and beautify your JavaScript code with customizable indentation (2 or 4 spaces, or tabs).

Package used

Terser

v5.47.1

Terser is a modern JavaScript compressor that optimizes the size and performance of your code.

Basic example

Input code

function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total += items[i].price;
  }
  return total;
}

const products = [
  { name: 'Laptop', price: 999 },
  { name: 'Mouse', price: 25 }
];

console.log('Total:', calculateTotal(products));

Minified code

function calculateTotal(t){let e=0;for(let o=0;o<t.length;o++)e+=t[o].price;return e}const products=[{name:"Laptop",price:999},{name:"Mouse",price:25}];console.log("Total:",calculateTotal(products));

JavaScript optimization guide

Minification options

ECMAScript Version

Defines the target ECMAScript version for minification (ES5, ES2015, ES2017, ES2020, ES2022)

Examples by ECMAScript version:

Original code (ES2022)

const data = { name: 'test' };
const { name } = data;
console.log(name);

ES2022

const{name:data}=data;console.log(data)

ES5

var data={name:'test'};var name=data.name;console.log(name)

Compression Level

Controls the aggressiveness of compression (conservative, normal, aggressive)

ConservativeConservative - Minimal compression, safer

NormalNormal - Balance between size and compatibility

AggressiveAggressive - Maximum compression, may break some code

Compression examples:

Original code

function calculateTotal(items) {
    let total = 0;
    for (let i = 0; i < items.length; i++) {
        total += items[i].price;
    }
    return total;
}

Conservative

function calculateTotal(items){let total=0;for(let i=0;i<items.length;i++)total+=items[i].price;return total}

Normal

function calculateTotal(t){let e=0;for(let l=0;l<t.length;l++)e+=t[l].price;return e}

Aggressive

function e(e){let t=0;for(let n=0;n<e.length;n++)t+=e[n].price;return t}

Preserve Class Names

Preserves CSS class names in string literals

Comparison with/without option:

Original code

element.className = 'my-class';
element.setAttribute('class', 'another-class');

With preserveClassNames: true

element.className='my-class';element.setAttribute('class','another-class')

With preserveClassNames: false

element.className='a';element.setAttribute('class','b')

Difference

CSS class names are preserved in strings

Preserve Function Names

Preserves function names for debugging

Comparison with/without option:

Original code

function myFunction() { 
    return true; 
}
const obj = { myMethod() { return false; } };

With preserveFunctionNames: true

function myFunction(){return!0}const obj={myMethod(){return!1}}

With preserveFunctionNames: false

function a(){return!0}const obj={b(){return!1}}

Difference

Function names are preserved for debugging

Remove Console

Removes all console.log, console.warn, etc. calls

Comparison with/without option:

Original code

console.log('Debug info');
console.warn('Warning message');
const result = calculateTotal(items);
console.log('Result:', result);
return result;

With removeConsole: true

const result=calculateTotal(items);return result

With removeConsole: false

console.log('Debug info');console.warn('Warning message');const result=calculateTotal(items);console.log('Result:',result);return result

Difference

All console.* calls are removed

Remove Debugger

Removes debugger statements from code

Comparison with/without option:

Original code

if (condition) {
    debugger;
    return true;
}
function test() {
    debugger;
    return false;
}

With removeDebugger: true

if(condition)return!0;function test(){return!1}

With removeDebugger: false

if(condition){debugger;return!0}function test(){debugger;return!1}

Difference

Debugger statements are removed

Beautify Options

Options for formatting and beautifying JavaScript (Beautify only, not for Minify/Unminify)

Indentation Size

Sets the number of spaces or tabs for indentation during Beautify

Original code

function test(){return true;}

With 2 spaces

function test() {
  return true;
}

With 4 spaces

function test() {
    return true;
}

Difference

Indentation is customizable only for Beautify. Unminify always uses 2 spaces.

Indentation Type

Use spaces or tabs for indentation during Beautify

Original code

function test(){return true;}

With spaces

function test() {
  return true;
}

With tabs

function test() {
	return true;
}

Difference

Spaces are more standard, tabs may be preferred according to your code conventions.

JavaScript Beautifier vs Unminifier — What's the Difference

Both terms refer to making minified code readable, but with subtle differences. A beautifier applies consistent formatting rules (indentation style, brace placement) to any code. An unminifier specifically targets minified code, restoring structure that was stripped during compression. Our tool handles both — paste your code and click Unminify or Beautify depending on your needs.