toolspace

JavaScript beautifier

Beautify minified or messy JavaScript with Prettier: indentation, quotes, semicolons and line breaks made consistent. JSX, async code, optional chaining and private class fields are all understood.

Loading…

Worked example

A one-line snippet, as you might copy it out of a minified file.

javascript
const total=items.filter(i=>i.inStock).reduce((sum,i)=>sum+i.price*i.qty,0);console.log(`Total: ${total}`)
formatted
const total = items
  .filter((i) => i.inStock)
  .reduce((sum, i) => sum + i.price * i.qty, 0);
console.log(`Total: ${total}`);

Common mistakes

  • Pasting code that doesn’t parse

    Prettier needs valid syntax. A missing bracket stops it, and the status line shows where; fix that line and the rest formats.

  • Fighting the line width

    Prettier breaks lines to fit the width you choose. If your project uses wider lines, pick 100 or 120 instead of rewrapping by hand.

  • Formatting JSON as JavaScript

    JSON formats here too, but the JSON formatter keeps numbers exactly and validates the file. Use it for data.

  • Beautifying code you don’t trust

    Readable code is still code. Formatting never runs it, but don’t paste the result into a console to “see what it does”.

How it works

  1. 1

    Paste JavaScript

    One line of minified code or a whole module. Open or drop a .js, .mjs or .jsx file to read it locally.

  2. 2

    Set the style

    Indentation, a line width of 80, 100 or 120, and single or double quotes. Everything else follows Prettier’s defaults.

  3. 3

    Copy the result

    The output updates as you type. A syntax error is shown with its line and column, with a button that jumps to it.

Questions

Can it make a minified bundle readable?
It restores line breaks and indentation, so the structure becomes readable. Names a minifier shortened to a, b or c stay short; they can’t be recovered from the code alone.
Can it minify JavaScript?
No. Prettier only formats, and shrinking JavaScript safely needs a full minifier such as Terser or esbuild, which this page doesn’t include. Your build tool does this better.
Which Prettier settings are used?
Prettier 3’s defaults (semicolons on, trailing commas where valid) plus the indentation, line width and quote style you pick here. The output matches running Prettier with the same options.
What about TypeScript?
Choose TypeScript in the language list, or use the code beautifier. Types, interfaces and generics are formatted by the same Prettier TypeScript parser.