Gera Tools

JavaScript Formatter / Beautifier

Format minified or messy JavaScript with clean indentation in the browser

Free JavaScript formatter and beautifier — re-indent minified or messy code around braces and statements with 2-space, 4-space, or tab indentation. Strings, regex, and comments are preserved. Runs in your browser; nothing is uploaded. It runs free in your browser on Gera Tools, with nothing uploaded.

Last updated Source: Gera Tools

What does the beautifier do?

It re-indents your code based on brace depth and adds newlines after braces and semicolons, turning a single dense line into a readable, consistently indented block. You choose 2 spaces, 4 spaces, or tabs.

A JavaScript beautifier turns minified one-liners and inconsistently indented code into clean, readable JavaScript. When you copy a snippet from a bundle, a minified library, or a colleague’s compressed paste, reading it is painful. This formatter re-indents the code in your browser using the indentation style you choose, with no upload and no install.

The typical use cases

Reading minified bundle code. Browser devtools have a built-in pretty-printer, but it requires a live page. This tool works on any snippet you paste — from a CDN URL, a curl response, or code copied out of a build artifact.

Normalising inconsistently formatted pastes. Code shared via chat, Stack Overflow, or PR comments frequently loses indentation context. Paste and reformat in one click before reviewing or editing.

Debugging a colleague’s one-liner. When someone writes a single-expression IIFE, ternary chain, or deeply nested callback on one line, expanding it to readable form is the first step to understanding it.

Pairing with the JavaScript minifier. Format → read and edit → minify back to compact form, all in the browser without leaving the page.

How it works

The formatter first tokenizes the source. It walks the code character by character and recognises:

  • String literals ("…", '…', `…`) — copied verbatim; braces inside are not counted.
  • Regular expression literals — classified by checking the preceding token (a / starts a regex only after an operator, bracket, or keyword like return; otherwise it’s division).
  • Comments — // line and /* block */ are preserved and placed on their own lines.
  • Everything else — punctuation, keywords, identifiers — affects layout.

With tokens identified, the beautifier re-emits the code with three layout rules:

  1. Increase indent level after {.
  2. Decrease indent level before }.
  3. Start a new line after } and ;.

One special case: closing braces followed immediately by ), ,, ;, or . stay on the same line, so method chains like }).then(…) and }); format correctly instead of splitting onto two awkward lines.

You can pick 2-space, 4-space, or tab indentation to match your project’s style.

How it differs from Prettier

Prettier is a full AST-based formatter that rewrites the code more aggressively: wrapping long lines to a maximum print width, normalising quote style (" vs '), sorting imports, and enforcing consistent trailing commas. This tool is a tokenizer-level beautifier — it adds newlines and indentation but does not rewrite structure. The result is deterministic and safe for any valid JavaScript, including code with unusual formatting choices you want to keep.

If you want Prettier-style formatting in a project, install Prettier as a dev dependency. If you want quick, no-install re-indentation of a paste, this tool is faster.

What is preserved

  • String contents (including whitespace, braces, semicolons inside strings)
  • Comment text (both line and block comments)
  • Code structure — no identifiers are renamed, no logic is rewritten

Everything runs locally; your source code never leaves your browser.