Skip to content
ToolHive

JS Formatter

Format JavaScript with Prettier, running entirely in your browser. Handles modern syntax — arrow functions, classes, async/await, template literals, optional chaining, JSX and ES modules — with 2-space, 4-space or tab indentation.

JavaScript Tools

How to use JS Formatter

  1. Paste JavaScript into the input panel.
  2. Choose 2 spaces, 4 spaces or tabs.
  3. Press Format. The parser loads on first use, then formatting is instant.
  4. Copy the result, or download it as formatted.js.
  5. If the code has a syntax error, the message names the line so you can fix it.

Examples

Minified source

One line, no spaces — the state most bundled code arrives in.

const f=(a,b)=>{if(!a)return b;return{...a,...b}}

After formatting

Prettier's canonical layout, with your chosen indentation.

const f = (a, b) => {
  if (!a) return b;
  return { ...a, ...b };
};

Features

  • Real Prettier 3 with the Babel parser, not pattern matching
  • Modern syntax: classes, arrow functions, async/await, generators, optional chaining, nullish coalescing, JSX and ES modules
  • 2-space, 4-space or tab indentation
  • Reformats minified code into something readable
  • Reports genuine syntax errors instead of producing broken output
  • Copy to clipboard or download formatted.js
  • Autosaves your draft to this browser only
  • The parser is fetched only when you press Format, so no other page pays for it

Frequently asked questions

Which formatter does this use?
Prettier 3 with the Babel parser, compiled for the browser. It is the same engine most editors run on save, so the output matches what your team's tooling would produce.
Does it support TypeScript or JSX?
JSX yes — the Babel parser handles it. TypeScript-specific syntax such as type annotations and interfaces is not covered by this parser, so a .ts file with types will report a syntax error.
Can it unminify bundled code?
It can re-indent and re-space minified code, which makes it readable. It cannot restore original variable names or comments, because a minifier discards those permanently.
Why did formatting fail?
Prettier must parse code before it can print it, so a genuine syntax error stops it. The error message names the position. This is a feature: a formatter that silently reformatted broken code would hide the bug.
Is my code uploaded?
No. Prettier is downloaded to your browser and runs there. Your source never leaves the tab.
Why does the first format take a moment?
The parser is around a megabyte and is fetched on demand the first time you press Format, so that visitors to other pages never download it. After that it is cached and formatting is immediate.

Related tools

About JS Formatter

JS Formatter is part of JavaScript Tools on ToolHive, a growing collection of small, focused utilities for developers, designers and students. Format, minify and inspect JavaScript without installing a single package. Everything runs client-side, so your data never leaves the browser tab — which makes these tools safe to use with work-in-progress code and private content.