QiLing Tools

🟨JavaScript Beautifier & Minifier - Format JS, TS & JSON

A minified script squeezed onto one line, inherited code with messy indentation, or a TypeScript or JSON snippet you just want to read — paste it here and get neatly laid-out code. The formatter is hand-written: a complete tokenizer first recognises strings, template literals (including nested ${} expressions), regular expressions versus division, comments, numbers and JSX; then indentation is recomputed from bracket nesting, lines break after semicolons and blocks, spacing around operators, commas and keywords is normalised, objects and arrays that exceed the line width are expanded, and long arrays of numbers or strings are filled up to the width. Only whitespace changes: no semicolons are added or removed, quotes and names are untouched, the output has exactly the same token sequence as the input, blank lines are kept (at most one in a row), and formatting twice gives the same result. TypeScript generics, type annotations, optional parameters, non-null assertions, decorators, private fields and JSX are handled, and valid JSON is detected and fully expanded. Minify mode strips comments and extra whitespace (optionally keeping /*! license comments) but keeps a line break wherever automatic semicolon insertion (ASI) depends on it, so semicolon-free code keeps its meaning. Everything runs locally in your browser.

Free · No sign-up · Runs in your browserLast updated:

Loading tool...

How to use JavaScript Formatter

  1. 1Paste JavaScript, TypeScript, JSX or JSON into the input box
  2. 2Choose Beautify or Minify and set the indent (2/4 spaces or tab) and line width
  3. 3Review the result, then copy it or download a .js / .json file

FAQ

Can formatting change what my code does?
No. Only spaces, line breaks and indentation change — no semicolons are added or removed, quotes and names stay as they are, and the token sequence is identical to the input. New line breaks are only inserted after semicolons, brackets and commas, where automatic semicolon insertion cannot kick in. We tested it on a large set of real npm package sources: formatted and minified output passes node --check and keeps the same tokens.
Does it support TypeScript, JSX and JSON?
Yes. TypeScript generics (such as Map<string, T[]> or <T,>() =>), type annotations, optional parameters x?, non-null assertions x!, interfaces, type aliases, enums and decorators are laid out correctly. JSX elements are kept exactly as written and re-indented as a whole, and valid JSON input is detected and expanded level by level.
How is this minifier different from a bundler?
It is a light minifier: comments and redundant whitespace are removed, but variables are not renamed and dead code is not eliminated, so savings are moderate. In exchange it is safe, fairly readable and needs no build step. For the smallest possible bundles use esbuild or Terser in your project. Line breaks that matter for ASI are kept, so semicolon-free code still works.
Is my code uploaded?
No. Tokenizing, formatting and minifying all run in your browser with no network requests, so it is fine to paste internal code or config files that contain secrets.