JavaScript Formatter & Beautifier - Format JS Online

About the JavaScript Formatter playground

The JavaScript Formatter reformats cluttered or minified JavaScript into clean, consistently indented code. It adds proper line breaks, normalizes spacing around operators and braces, and applies a uniform statement layout so the structure of functions, loops, and conditionals becomes obvious. All processing happens in your browser, meaning your source code, including any keys or business logic, is never transmitted to a server.

JavaScript is the programming language of the web, running in every browser and, via Node.js, on servers and tooling. Production bundles are minified to reduce download size, which strips whitespace and renames variables. Reformatting restores readability so you can study third-party scripts, debug a stack trace, or tidy hand-written code. Consistent formatting also reduces diff noise and helps a team maintain a single shared style.

HostedJavaScript Formatter runtime

mainentry file

single fileworkspace

stdinprogram input

How it works

Write

The main file is the entry point for each run.

Give it input

Use the Input panel to pipe standard input to your program when it needs data.

Run

Run sends your code to a fresh hosted runtime and streams the result into the output panel.

Keep or share

Your draft stays in this browser, and Share creates a separate snapshot link.

External resources

MDN JavaScript— Format reference

Messy input

function add(a,b){if(a==null)a=0;return a+b}const xs=[1,2,3].map(n=>n*2);

Formatted output

function add(a, b) {
  if (a == null) a = 0;
  return a + b;
}

const xs = [1, 2, 3].map((n) => n * 2);

Async function formatted

async function getUser(id) {
  const res = await fetch(`/api/users/${id}`);
  const data = await res.json();
  return data;
}

Class messy input

class Counter{constructor(start){this.count=start||0}increment(){this.count++;return this.count}}

Class formatted output

class Counter {
  constructor(start) {
    this.count = start || 0;
  }

  increment() {
    this.count++;
    return this.count;
  }
}

Promise chain formatted

fetch('/api/data')
  .then((res) => res.json())
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.error(err);
  });

Switch statement formatted

function label(status) {
  switch (status) {
    case 'open':
      return 'Open';
    case 'closed':
      return 'Closed';
    default:
      return 'Unknown';
  }
}

Destructuring messy input

const{name,age=18,...rest}=user;const[first,,third]=items;

Destructuring formatted output

const { name, age = 18, ...rest } = user;
const [first, , third] = items;

Try/catch formatted

try {
  const data = JSON.parse(input);
  return data.value;
} catch (err) {
  console.error('Invalid input', err);
  return null;
}

Input

Output

Start typing to auto-process

JavaScript Formatter

Write

Give it input

Run

Keep or share

Editing

Navigation

Selection