JavaScript Formatter & Minifier

JavaScript Formatting Guide

JavaScript minification compresses a script by removing whitespace and comments, shortening local variable and function names, and stripping dead code - without changing how the code behaves. JavaScript formatting - also known as beautifying or pretty printing - does the opposite: it adds consistent indentation and line breaks so the same code is easy to read and edit.

Why Format or Minify JavaScript?

JavaScript you copy from a bundler output, browser dev tools, or a teammate is often either inconsistently indented and hard to scan, or already minified into a single line that's impossible to debug. This tool solves both problems in one place:

• Beautify for readability: Re-indent functions, blocks, and statements with a consistent indent size so you can review and edit code easily.
• Minify for production: Run your code through Terser - the same minifier used by Webpack, Rollup, and Vite - to strip whitespace and comments, remove dead code, and optionally shorten variable names.
• Real, safe minification: Unlike naive whitespace stripping, Terser parses your code into an AST first, so output stays syntactically correct even with tricky automatic-semicolon-insertion edge cases.
• One-click copy: Copy the formatted or minified result straight into your editor.
• Zero install: Works entirely in your browser - no extensions, plugins, or sign-up required.

JavaScript Formatter & Minifier in Action

Here's a quick example of the same function before and after running it through this tool:

function add(a,b){return a+b}

function add(a, b) {
  return a + b;
}

Formatting vs. Minifying

Formatting and minifying are opposite operations on the same code - one optimizes for humans, the other for file size.

JavaScript Formatter & Minifier vs. Prettier and ESLint --fix

Prettier and eslint --fix are the standard choices for formatting JavaScript inside a project, but they require installing dependencies, adding config files, and running a build step. This tool covers the gap for quick, ad-hoc formatting and minification - no install, no config, just paste and go.

Common Use Cases for JavaScript Formatting & Minification

Pretty printing and compressing JavaScript solve different everyday problems. Here's when each one comes in handy:

• Cleaning up copy-pasted code: JavaScript copied from browser dev tools, a CDN bundle, or a third-party snippet is often a single unreadable line. Pretty print it to review the logic before reusing it.
• Reviewing build output: Format bundler output to check what's actually being shipped, then minify the final build.
• Debugging third-party scripts: Minified JavaScript from a competitor's site, an embedded widget, or an analytics snippet is hard to read - beautify it first to inspect the logic.
• Shrinking scripts for performance: Compress hand-written JavaScript for a static site or landing page to cut payload size and improve load times.

What Changes When Minifying

• Whitespace and line breaks: all unnecessary whitespace between tokens is removed.
• Comments: regular comments are removed when "Remove comments" is enabled - license comments (/*! ... */ or containing @license / @preserve) are kept.
• Dead code: unreachable branches and unused expressions are removed by Terser's compressor.
• Variable and function names: when "Mangle variable names" is enabled, local identifiers are shortened to single or double letters - top-level declarations are left as-is so globals and module exports keep their names.

How to Use This Tool

• Paste your JavaScript - or click "Load sample" to try it with example code.
• Choose an indent size - 2 spaces, 4 spaces, or tabs for the formatted output.
• Click Format or Minify - the result appears in the output box, with character counts for both versions.
• Copy the result - click Copy to place it on your clipboard.

JavaScript Formatting Best Practices

• Pick one indent size and stick to it: 2 spaces is the de-facto standard for JavaScript, but whatever you choose, keep it consistent across your project so diffs stay clean.
• Format source, minify output: Keep your source files formatted for readability, and only minify the build output you actually ship.
• Keep license banners when minifying: Use /*! ... */ or @license comments for copyright notices you need to keep in a minified file - this tool preserves them even with "Remove comments" enabled.
• Re-check after minifying: Always run or test minified code before deploying, especially with mangling enabled, to confirm it still behaves correctly.
• Don't minify during development: Minified code is hard to debug in browser dev tools. Format for local development and minify only as a build step.

Frequently Asked Questions