Does formatting change what my code does?

No. The formatter only changes whitespace and line breaks. Strings, template literals, regular expressions and comments are kept as they are.

Does it check my JavaScript for errors?

No. It is a formatter (js-beautify), not a full JavaScript parser, so it lays out the code without validating it. Broken code is formatted as well as possible. The JavaScript minifier, which parses the code, reports syntax errors with line and column.

Can it unminify JavaScript?

It restores readable indentation and line breaks. Names that a minifier shortened (like a, b, c) can't be restored, because the original names are no longer in the file.

Is modern JavaScript supported?

Yes: classes and private #fields, async/await, arrow functions, optional chaining, nullish coalescing, template literals, spread, ES modules and regular expressions with flags.

JavaScript Formatter & Beautifier

Make minified or badly formatted JavaScript readable again.

JavaScript input

import {formatPrice} from "./money.js";const TAX=0.19;export class Cart{#items=[];add(item,qty=1){const found=this.#items.find(i=>i.id===item.id);if(found){found.qty+=qty}else{this.#items.push({...item,qty})}return this}get total(){return this.#items.reduce((sum,{price,qty})=>sum+price*qty,0)*(1+TAX)}}
export async function loadCart(userId){const res=await fetch(`/api/users/${userId}/cart`);if(!res.ok)throw new Error(`HTTP ${res.status}`);const data=await res.json();return data?.items??[]}
const isSku=/^[A-Z]{2}-\d{3}$/u;console.log(formatPrice(42),"Größe ✓",isSku.test("KB-001"));

Formatted JavaScript

import {
  formatPrice
} from "./money.js";
const TAX = 0.19;
export class Cart {
  #items = [];
  add(item, qty = 1) {
    const found = this.#items.find(i => i.id === item.id);
    if (found) {
      found.qty += qty
    } else {
      this.#items.push({
        ...item,
        qty
      })
    }
    return this
  }
  get total() {
    return this.#items.reduce((sum, {
      price,
      qty
    }) => sum + price * qty, 0) * (1 + TAX)
  }
}
export async function loadCart(userId) {
  const res = await fetch(`/api/users/${userId}/cart`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const data = await res.json();
  return data?.items ?? []
}
const isSku = /^[A-Z]{2}-\d{3}$/u;
console.log(formatPrice(42), "Größe ✓", isSku.test("KB-001"));

import {
  formatPrice
} from "./money.js";
const TAX = 0.19;
export class Cart {
  #items = [];
  add(item, qty = 1) {
    const found = this.#items.find(i => i.id === item.id);
    if (found) {
      found.qty += qty
    } else {
      this.#items.push({
        ...item,
        qty
      })
    }
    return this
  }
  get total() {
    return this.#items.reduce((sum, {
      price,
      qty
    }) => sum + price * qty, 0) * (1 + TAX)
  }
}
export async function loadCart(userId) {
  const res = await fetch(`/api/users/${userId}/cart`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const data = await res.json();
  return data?.items ?? []
}
const isSku = /^[A-Z]{2}-\d{3}$/u;
console.log(formatPrice(42), "Größe ✓", isSku.test("KB-001"));

How to format JavaScript

Paste minified or messy JavaScript on the left, or open a .js file.
The formatted code appears on the right and updates as you type.
Pick 2 spaces, 4 spaces or tabs for indentation.
Copy the result or download it as a .js file.

Before and after

Before

const f=(a,b)=>{if(!a)return b??0;return a.map(x=>x*2).filter(Boolean)}

After formatting

const f = (a, b) => {
  if (!a) return b ?? 0;
  return a.map(x => x * 2).filter(Boolean)
}

What the formatter does — and doesn't

The formatter uses js-beautify, which reads your code as a stream of tokens and re-lays it out: one statement per line, consistent indentation, spaces around operators and after keywords. It understands strings, template literals, regular expressions and comments well enough to leave them untouched.

It is not a full JavaScript parser and does not check that your code is valid — broken code is laid out as well as possible rather than rejected. Shortened names in minified code (a, b, t) stay short: the original names aren't in the file anymore.

Use cases

Reading a minified library or a third-party script to understand what it does.
Cleaning up a snippet from Stack Overflow, a chat or an old project.
Debugging production code copied from the browser's dev tools.

Related tools

Going the other way? The JavaScript minifier compresses code for production and reports syntax errors. Format stylesheets with the CSS formatter and markup with the HTML formatter, or run your script together with HTML and CSS in the HTML compiler.

Frequently asked questions

Does formatting change what my code does?: No. The formatter only changes whitespace and line breaks. Strings, template literals, regular expressions and comments are kept as they are.
Does it check my JavaScript for errors?: No. It is a formatter (js-beautify), not a full JavaScript parser, so it lays out the code without validating it. Broken code is formatted as well as possible. The JavaScript minifier, which parses the code, reports syntax errors with line and column.
Can it unminify JavaScript?: It restores readable indentation and line breaks. Names that a minifier shortened (like a, b, c) can't be restored, because the original names are no longer in the file.
Is modern JavaScript supported?: Yes: classes and private #fields, async/await, arrow functions, optional chaining, nullish coalescing, template literals, spread, ES modules and regular expressions with flags.