JavaScript Formatter

The JavaScript Formatter & Minifier is a free, browser-based tool for beautifying or compressing JavaScript code. All processing runs entirely in your browser — no code is ever sent to a server.

Features

How to Use

1. Paste your JavaScript into the input area, or click Load file to upload a file. You can also drag-and-drop a file onto the text area.
2. Select Output mode: Beautify to format, or Minify to compress.
3. Choose an Indent style (2 spaces, 4 spaces, or tab — active in Beautify mode only).
4. Toggle Keep semicolons to control whether semicolons appear in the output.
5. Click Beautify JS or Minify JS.
6. Copy the result to clipboard or click Download to save the file.

How Beautification Works

The tool uses a custom token-based formatter rather than executing or evaluating your code. The process has two steps:

Tokenizing

The source is scanned character-by-character into typed tokens: words, numbers, strings, template literals, regex literals, punctuation, operators, line comments, and block comments. A context-aware heuristic distinguishes regex literals (e.g. /\d+/g) from division operators (e.g. a / b) by examining what the previous meaningful token was.

Formatting

Tokens are reassembled with consistent rules:

• Opening { stays on the same line as its statement; the body is indented one level
• Closing } dedents and appears on its own line
• Binary operators (===, &&, +, etc.) are surrounded by spaces
• Unary operators (!, ~, ++, --) are not padded
• Keywords followed by ( — such as if, for, while — get a space before the parenthesis
• else, catch, and finally are placed on the same line as the closing }
• Commas are followed by a single space
• Function calls and subscripts (obj.prop, arr[i]) are compacted without extra spaces

Minification

In Minify mode all whitespace and comments are removed. Only the minimum spaces required to prevent tokens from merging (e.g. return value cannot become returnvalue) are inserted. The option Keep semicolons controls whether trailing semicolons before } are preserved. Disabling it produces slightly smaller output compatible with most modern environments.

/*! licence comments (e.g. from jQuery, Lodash, or Bootstrap) are always preserved in minified output.

Limitations

This tool is a token-level formatter — it does not parse a full Abstract Syntax Tree (AST). As a result:

• JSX / TSX syntax is not supported
• TypeScript type annotations may not always be formatted ideally
• Very complex operator chains may not be line-wrapped at optimal points
• Arrow functions with implicit returns across multiple lines may not be reformatted

For production codebases that need AST-accurate formatting, tools such as Prettier or ESLint with --fix are recommended. This tool is best suited for quick cleanup, inspecting minified code, and compressing scripts for deployment.