OnlineConverTools
Sign in

JavaScript Formatter

Beautify or minify JavaScript code

About JavaScript Formatter

JavaScript Formatter does two opposite jobs on the same code. Format uses js-beautify: 2-space indentation, one statement per line, spaces around operators, at most one blank line kept in a row, and strings, template literals, regular expressions, and comments left as written. Minify uses Terser, the same engine as JS Minifier: it parses the code, shortens local names and removes dead code and comments. Format never complains about invalid code; Minify stops and shows Terser's message, without a line number. js-beautify and Terser both work on your code inside the browser tab.

Example

Format: a one-line function laid out with 2-space indentation.

Input

function f(a,b){if(a){return b}else{return 0}}var x=f(1,2);

Output

function f(a, b) {
  if (a) {
    return b
  } else {
    return 0
  }
}
var x = f(1, 2);

How to beautify or minify JavaScript

  1. 1Paste JavaScript into "Input".
  2. 2Click "Format" to make it readable, or "Minify" to make it small.
  3. 3Read "Output"; after Minify, an error shows there as Error: followed by Terser's message.
  4. 4Click "Copy", or "Download" to save "formatted.js" (the name stays the same after Minify).

Formats and limits

Input
JavaScript, scripts or modules, as text
Format
js-beautify: 2-space indent, spaces around operators, at most one blank line in a row
Minify
Terser: compress and mangle, comments removed
Errors
Format reports none; Minify shows Terser's message without line or column

Where your code is processed

The formatter and the minifier are JavaScript libraries loaded into this page on first use; they read your code inside the browser, and your code is not uploaded. When a Minify error appears, its message is sent to our error log with quoted text, long numbers, and addresses replaced, along with the tool name and the name and version of your browser.

Frequently asked questions

Does formatting change what my code does?

No. Format only changes whitespace: indentation, line breaks, and spaces around operators and keywords. Strings, template literals, regular expressions, and comments are kept exactly as written.

Is minified code safe to use?

Yes, when Terser accepts it: it parses the code first, so automatic semicolon insertion and expressions such as a - -b keep their meaning. Global names stay; only names local to a function are shortened.

Does the Minify error give a line number?

No. The page shows only Terser's message, such as Name expected, and not the position Terser keeps separately. To locate the error, paste the code into Code Formatter, which reports syntax errors with line and column.

Tips and tricks

  • ✓Format minified code from a website to read it; keep your own readable source and minify a copy for deployment.

Related tools