Formatting and minification target different artifacts
Use Prettier output for review, debugging, and source control. Use Terser output only as a tested deployment artifact. Neither mode executes the pasted program, bundles imports, resolves dependencies, or validates runtime behavior.
How do you use it?
- Choose Format JavaScript for readable source or Minify JavaScript for a smaller delivery artifact.
- Select Script for classic browser or Node.js source, or ES module when the code uses import and export syntax.
- Paste JavaScript no larger than 2 MB, run the operation, then review and download javascript-output.js.
Worked example
Compare the same function in both modes
Input
const tools=["HTML","JavaScript"];function findTool(name){return tools.find((tool)=>tool===name)??null}Output
Format JavaScript:
const tools = ['HTML', 'JavaScript'];
function findTool(name) {
return tools.find((tool) => tool === name) ?? null;
}
Minify JavaScript:
const tools=["HTML","JavaScript"];function findTool(o){return tools.find(n=>n===o)??null}With the current options, the source is 103 UTF-8 bytes, formatted output is 120 bytes, and minified output is 89 bytes. These are this example’s results, not a general compression ratio.
Common errors and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| Formatting or minification reports an unexpected token. | The source is incomplete, contains unsupported proposal syntax, or is TypeScript rather than JavaScript. | Correct the first syntax error and remove TypeScript-only annotations; this tool intentionally targets JavaScript and JSX parsed by Babel. |
| An import or export statement fails during minification. | The source type is set to Script even though the input is an ES module. | Select ES module before minifying source that contains import, export, or module-level semantics. |
| Minified code behaves differently in the application. | The code depends on function names, Function.prototype.toString(), stack formatting, top-level globals, or nonstandard side effects that conflict with optimizer assumptions. | Keep readable source under version control, test the minified artifact in the target runtime, and disable minification for incompatible code. |
Should you beautify source or minify a delivery file?
For the worked example below, the original is 103 UTF-8 bytes, Prettier output is 120, and Terser output is 89. Readable formatting can increase size; compression depends on the actual program. Checked on 2026-10-15 with Prettier 3.9.9 and Terser 5.51.2.
| Mode | Use it for | What remains unchecked |
|---|---|---|
| Format JavaScript | Reading, review and consistent source layout | Imports, types and runtime behavior |
| Minify JavaScript · Script | A compact classic-script artifact | Application behavior and optimizer assumptions |
| Minify JavaScript · ES module | Source with import/export and module semantics | Dependency resolution, bundling and runtime behavior |
Important behavior of JavaScript Formatter
Minification can change function and variable names, remove unused code, and expose assumptions about reflection or side effects; regression-test the generated artifact before deployment.
Standards and implementation references
- Prettier browser documentation (opens in a new tab)Documents standalone browser formatting and the Babel and ESTree plugins used for JavaScript.
- Terser API reference (opens in a new tab)Documents the asynchronous minify API, compression, mangling, module mode, and output options.
- ECMAScript language specification (opens in a new tab)Defines the JavaScript language syntax and semantics parsed by these tools.
Frequently asked questions about JavaScript Formatter
What is the difference between beautifying and minifying JavaScript?
Beautifying adds consistent layout for reading and review. Minifying removes optional syntax and can shorten local names. Keep readable source and test the minified artifact in the application that will run it.
Why do import or export statements fail in Script mode?
Choose ES module when minifying a file that uses import or export. Script mode is intended for classic scripts; changing the mode does not bundle imported dependencies.
Can I paste TypeScript into this JavaScript formatter?
Use the TypeScript Formatter for type annotations and interfaces. This JavaScript tool does not compile TypeScript or type-check a project.
Does successful formatting prove that my program works?
No. Parsing and formatting do not check missing imports, network responses, DOM availability, application logic, or runtime behavior. Neither mode executes your pasted code or uploads it to KitLumi.
What changed?
Checked the same source through Prettier and Terser, published exact outputs and UTF-8 byte counts, and clarified source-mode and runtime-validation limits.