JS Minifier Online — Free JavaScript Minifier & Beautifier

Free online JavaScript formatter, beautifier, and minifier for frontend developers and software engineers. Paste your raw JavaScript or React JSX code to compress it with Terser or format it with Prettier. Customize indentation with 2 spaces, 4 spaces, or tabs, set custom print widths, toggle semicolon insertion, configure quote styles, and adjust trailing commas. Minify script bundles for production deployments with aggressive dead code elimination, console.log removal, and variable name mangling while preserving open-source license comments. Validate syntax with detailed line-by-line error reports. Runs 100% locally in your browser for absolute privacy.

JavaScript is required to use this interactive tool. Please enable JavaScript in your browser, or use our JS Minifier / Beautifier API for programmatic access.

Browse all Web Code tools →

Popular Web Code tools

Browse all 21 Web Code tools →

How to JS Minifier / Beautifier Online

Paste your JavaScript code into the input area on the left, or upload a .js file using the upload button. You can also drag and drop a file directly onto the input area.
Click the Format button or press ⌘⇧F to beautify your JavaScript with Prettier, or Minify (⌘⇧M) to compress it with Terser for production deployment.
Customize formatting options: choose indentation (2 spaces, 4 spaces, or tabs), set print width, configure trailing comma style, and toggle semicolons and quote styles.
For minification, configure options like ECMA target (ES2015-ES2022), enable/disable mangling, compression, console removal, and license comment preservation.
Use Validate (⌘⇧V) to check your JavaScript for syntax errors. The validator shows error locations with line and column numbers for quick debugging.
Copy the output with the Copy button, download as a .js file, or use Share to generate a gzip-compressed shareable URL for code reviews.
Enable Auto Format to automatically beautify your code as you type (with 300ms debounce for smooth typing experience).

JS Minifier / Beautifier Features

JavaScript formatter powered by Prettier with customizable indentation: 2 spaces, 4 spaces, or tabs to match your project's coding standards.
Configurable print width to control line wrapping for formatted code (default 80, adjustable 20-200 characters).
Trailing comma options: none, ES5, or all — automatically add or remove trailing commas in objects, arrays, and function parameters.
Quote style control: choose between single quotes or double quotes for string literals with automatic escaping.
Semicolon insertion toggle: automatically insert semicolons based on Prettier's rules or rely on ASI (Automatic Semicolon Insertion).
JavaScript minifier powered by Terser: compress code by removing whitespace, comments, and performing dead code elimination for smaller bundle sizes.
Variable name mangling: shorten variable and function names to obfuscate and reduce file size while preserving functionality.
ECMA target selection: specify JavaScript version target (ES2015/2016/2020/2022) for compatibility with older browsers or environments.
Console removal option: strip all console.log, console.error, console.warn, and other console statements for production builds.
Keep names option: preserve function and class names during minification for easier debugging in production error stacks.
Compress toggle: enable or disable Terser's compression passes (dead code removal, constant folding, etc.) for granular control.
License comment preservation: keep copyright and license comments in minified output when required by open-source licenses.
JavaScript syntax validator: detects parse errors, unclosed brackets, invalid tokens, and malformed expressions with line/column positions.
Error line highlighting: when syntax errors are detected, the offending line is highlighted in the input editor for quick identification.
Syntax highlighting with color-coded strings, keywords, numbers, literals, and comments for improved readability.
Auto-format with debounce: automatically format your code as you type with 300ms debounce to prevent input lag during rapid typing.
Race condition protection: generation counter ensures only the latest formatting/minification result is applied when options change rapidly.
JavaScript statistics: line count, byte size, and compression percentage displayed as meta badges for quick insights.
Shareable URLs: gzip-compresses your JavaScript into a URL parameter so you can share code snippets with teammates or save for later.
Works entirely in your browser — no JavaScript is ever sent to any server. Your code stays completely private.
Keyboard shortcuts for power users: ⌘⇧F to format, ⌘⇧M to minify, ⌘⇧V to validate, ⌘⇧K to clear.
Large-input warning with byte count — alerts you when the input may slow down processing due to file size.
Supports React, Vue, and other frameworks: the Babel parser handles JSX, modern JavaScript features, and experimental syntax.

All Guides

developer tools

De-minifying Production Stack Traces: Source Map Resolution Guide

Resolve minified JavaScript bundle errors back to original TypeScript source code using VLQ-decoded source maps, hidden source maps, and stack trace resolvers.

Read Field Manual

web code

Frontend Bundle Size Optimization: Tree-Shaking, Chunk Splitting & Dead Code Elimination

Diagnose JavaScript bundle bloat, fix broken tree-shaking patterns, eliminate barrel file overhead, and optimize Core Web Vitals (INP/LCP) in Next.js, Vite, and Webpack.

Read Field Manual

All Standards

JavaScript Source Maps (V3 Specification)Developer Tools

Source maps map compiled, minified, or transpiled code back to its original source code, enabling debugging of TypeScript and JSX in browsers.

Stack Trace (Error Call Stack & Traceback)Developer Tools

A stack trace is a structured report of the active execution call stack frames generated by runtimes when an unhandled error, exception, or panic occurs.

Tree Shaking & Dead Code Elimination in JavaScript BundlersDeveloper Tools

Tree shaking is a static analysis optimization in JavaScript bundlers that eliminates unused exports from the final production bundle to reduce file size.

Pre-built Automation Pipelines

Chain JS Minifier / Beautifier with other utilities in a multi-step visual workflow.

beginner

encoding

Base64 Decode → JSON Format

Decode a Base64 string and pretty-print the JSON inside it.

Flow:

InputBase64 Encode/DecodeJSON FormatterOutput

4 nodes

beginner

data-transformation

CSV → JSON → YAML

Convert CSV data to JSON, then to YAML format.

Flow:

InputCSV to JSONYAML ConverterOutput

4 nodes

intermediate

development

JSON Format → TypeScript Schema

Format JSON and generate TypeScript/Zod schema from it.

Flow:

InputJSON FormatterJSON to TypeScript & Schema GeneratorOutput

4 nodes

Example Input & Output

Sample Reference

Interactive Example: JS Minifier / Beautifier in Action

Show example

Sample Input (text)

function calculateTotal(items,taxRate=0.08){let subtotal=0;for(let i=0;i<items.length;i++){subtotal+=items[i].price*items[i].quantity;}const tax=subtotal*taxRate;return{subtotal:Math.round(subtotal*100)/100,tax:Math.round(tax*100)/100,total:Math.round((subtotal+tax)*100)/100};}

Sample Output

[Processed output for JS Minifier / Beautifier]
Input transformed successfully using js minifier, javascript minifier, js beautifier.

What happened:

Format, minify, and validate JavaScript code instantly.

Explore related converters

Frequently Asked Questions

Is this JavaScript minifier and beautifier free?: Yes, DevFlow JS Minifier / Beautifier is completely free with no usage limits. All formatting, minification, validation, and code analysis runs directly in your browser using Prettier and Terser — no account or signup required.
Is my JavaScript code safe?: Your JavaScript is processed entirely in your browser using pure JavaScript libraries. No code is ever transmitted to a server or stored anywhere outside your browser. Your code stays completely private on your machine.
What does JavaScript formatting do?: JavaScript formatting (also called beautifying or prettifying) takes minified, poorly indented, or inconsistent code and reformats it with consistent indentation, line breaks, and spacing. This makes the code human-readable, easier to debug, review, and maintain.
What is JavaScript minification?: JavaScript minification removes unnecessary whitespace, line breaks, comments, and optionally shortens variable names to reduce file size. Minified JavaScript loads faster in browsers and is commonly used for production deployment. Minification can reduce file sizes by 30-60% depending on the code.
What is the difference between formatting and minification?: Formatting makes code human-readable by adding indentation and line breaks. Minification makes code compact by removing whitespace and shortening names. Use formatting during development for readability and minification for production deployment to reduce file size and load times.
What is variable name mangling?: Variable name mangling is a minification technique that replaces descriptive variable and function names with short, meaningless names (e.g., 'calculateTotal' becomes 'c'). This significantly reduces file size but makes the code harder to debug. Use the 'Keep Names' option to preserve names for production debugging.
How does the ECMA target option work?: The ECMA target (ES2015, ES2016, ES2020, ES2022) tells Terser which JavaScript version to target when minifying. Choosing an older version ensures the minified code works in older browsers. For example, targeting ES2015 will transpile modern syntax like async/await and optional chaining to older equivalents.
What does the trailing comma option do?: The trailing comma option controls whether trailing commas are added to objects, arrays, and function parameters. 'ES5' is the default and adds trailing commas where safe. 'All' adds them everywhere (including function parameters). 'None' removes all trailing commas. Trailing commas make version control diffs cleaner and reduce merge conflicts.
Should I remove console.log statements?: For production deployment, yes — removing console statements reduces file size slightly and prevents leaking debugging information. Enable the 'Remove Console' option to strip all console.log, console.error, console.warn, and other console calls during minification.
What JavaScript validation checks are performed?: The validator uses Prettier's parser to detect: unclosed braces, brackets, or parentheses, invalid syntax, malformed expressions, unexpected tokens, and undeclared variables (in some modes). Each error includes its severity, line number, and column position for quick fixing.
Does the minifier handle React JSX?: Yes. The tool uses Prettier's Babel parser which fully supports JSX syntax. You can format React components, Vue templates with JSX, and other framework code. The minifier also processes JSX correctly, though you typically use a dedicated bundler like Webpack or Vite for React apps.
Can I format and minify TypeScript?: Currently, this tool focuses on JavaScript. For TypeScript, use the dedicated TypeScript formatter or first compile TypeScript to JavaScript then use this tool. Future updates may add TypeScript support via Prettier's TypeScript plugin.
How much does minification reduce file size?: Minification typically reduces JavaScript file sizes by 30-60% depending on the code. Removing whitespace and comments accounts for about 20-30% reduction. Variable mangling adds another 10-30% reduction. The compression percentage is displayed as a meta badge after minification.
What does the print width setting do?: Print width controls how long lines can get before Prettier wraps them. The default is 80 characters, matching most code style guides. Increase it for longer lines or decrease it for narrower code blocks. Prettier intelligently wraps at operator positions and chooses optimal break points.
Can I preserve copyright and license comments?: Yes. Enable the 'Preserve License Comments' option when minifying to keep comments that start with '!' or contain license/copyright text. This is required for open-source licenses that mandate preserving attribution in distributed code.
What is auto-format with debounce?: Auto-format automatically beautifies your code as you type. The 300ms debounce means formatting triggers 300ms after you stop typing, preventing performance issues during rapid typing while still providing near-instant feedback. Toggle this on for a live formatting experience.
Can I upload a JavaScript file?: Yes. Click the upload icon in the input panel header to select a .js file from your computer. You can also drag and drop files directly onto the input area. The file contents are loaded for formatting or minification.
Does it work offline?: Yes. All formatting logic (Prettier and Terser) is bundled with the page as pure JavaScript. Once the page has loaded, the JS Minifier / Beautifier works without an internet connection — no network requests are made during processing.
What's the difference between compress and mangle?: Compress removes dead code, evaluates constant expressions, and performs other optimizations. Mangle shortens variable and function names. Both reduce file size but in different ways. You can enable/disable each independently using the toggles in the minify options panel.

Developer Reference & Learning Hubs

Developer Guides

In-depth technical tutorials, debugging guides, and best practices.

Technical Glossary

Authoritative definitions for RFC standards, formats, and protocols.

AI Models Directory

Verified per-token API pricing, rate cards, and benchmarks across LLMs.

How to JS Minifier / Beautifier Online

Paste your JavaScript code into the input area on the left, or upload a .js file using the upload button. You can also drag and drop a file directly onto the input area.

Click the Format button or press ⌘⇧F to beautify your JavaScript with Prettier, or Minify (⌘⇧M) to compress it with Terser for production deployment.

Customize formatting options: choose indentation (2 spaces, 4 spaces, or tabs), set print width, configure trailing comma style, and toggle semicolons and quote styles.

For minification, configure options like ECMA target (ES2015-ES2022), enable/disable mangling, compression, console removal, and license comment preservation.

Use Validate (⌘⇧V) to check your JavaScript for syntax errors. The validator shows error locations with line and column numbers for quick debugging.

Copy the output with the Copy button, download as a .js file, or use Share to generate a gzip-compressed shareable URL for code reviews.

Enable Auto Format to automatically beautify your code as you type (with 300ms debounce for smooth typing experience).

JS Minifier / Beautifier Features

JavaScript formatter powered by Prettier with customizable indentation: 2 spaces, 4 spaces, or tabs to match your project's coding standards.

Configurable print width to control line wrapping for formatted code (default 80, adjustable 20-200 characters).

Trailing comma options: none, ES5, or all — automatically add or remove trailing commas in objects, arrays, and function parameters.

Quote style control: choose between single quotes or double quotes for string literals with automatic escaping.

Semicolon insertion toggle: automatically insert semicolons based on Prettier's rules or rely on ASI (Automatic Semicolon Insertion).

JavaScript minifier powered by Terser: compress code by removing whitespace, comments, and performing dead code elimination for smaller bundle sizes.

Variable name mangling: shorten variable and function names to obfuscate and reduce file size while preserving functionality.

ECMA target selection: specify JavaScript version target (ES2015/2016/2020/2022) for compatibility with older browsers or environments.

Console removal option: strip all console.log, console.error, console.warn, and other console statements for production builds.

Keep names option: preserve function and class names during minification for easier debugging in production error stacks.

Compress toggle: enable or disable Terser's compression passes (dead code removal, constant folding, etc.) for granular control.

License comment preservation: keep copyright and license comments in minified output when required by open-source licenses.

JavaScript syntax validator: detects parse errors, unclosed brackets, invalid tokens, and malformed expressions with line/column positions.

Error line highlighting: when syntax errors are detected, the offending line is highlighted in the input editor for quick identification.

Syntax highlighting with color-coded strings, keywords, numbers, literals, and comments for improved readability.

Auto-format with debounce: automatically format your code as you type with 300ms debounce to prevent input lag during rapid typing.

Race condition protection: generation counter ensures only the latest formatting/minification result is applied when options change rapidly.

JavaScript statistics: line count, byte size, and compression percentage displayed as meta badges for quick insights.

Shareable URLs: gzip-compresses your JavaScript into a URL parameter so you can share code snippets with teammates or save for later.

Works entirely in your browser — no JavaScript is ever sent to any server. Your code stays completely private.

Keyboard shortcuts for power users: ⌘⇧F to format, ⌘⇧M to minify, ⌘⇧V to validate, ⌘⇧K to clear.

Large-input warning with byte count — alerts you when the input may slow down processing due to file size.

Supports React, Vue, and other frameworks: the Babel parser handles JSX, modern JavaScript features, and experimental syntax.

function calculateTotal(items,taxRate=0.08){let subtotal=0;for(let i=0;i<items.length;i++){subtotal+=items[i].price*items[i].quantity;}const tax=subtotal*taxRate;return{subtotal:Math.round(subtotal*100)/100,tax:Math.round(tax*100)/100,total:Math.round((subtotal+tax)*100)/100};}

Frequently Asked Questions

Is this JavaScript minifier and beautifier free?

Yes, DevFlow JS Minifier / Beautifier is completely free with no usage limits. All formatting, minification, validation, and code analysis runs directly in your browser using Prettier and Terser — no account or signup required.

Is my JavaScript code safe?

Your JavaScript is processed entirely in your browser using pure JavaScript libraries. No code is ever transmitted to a server or stored anywhere outside your browser. Your code stays completely private on your machine.

What does JavaScript formatting do?

JavaScript formatting (also called beautifying or prettifying) takes minified, poorly indented, or inconsistent code and reformats it with consistent indentation, line breaks, and spacing. This makes the code human-readable, easier to debug, review, and maintain.

What is JavaScript minification?

JavaScript minification removes unnecessary whitespace, line breaks, comments, and optionally shortens variable names to reduce file size. Minified JavaScript loads faster in browsers and is commonly used for production deployment. Minification can reduce file sizes by 30-60% depending on the code.

What is the difference between formatting and minification?

Formatting makes code human-readable by adding indentation and line breaks. Minification makes code compact by removing whitespace and shortening names. Use formatting during development for readability and minification for production deployment to reduce file size and load times.

What is variable name mangling?

Variable name mangling is a minification technique that replaces descriptive variable and function names with short, meaningless names (e.g., 'calculateTotal' becomes 'c'). This significantly reduces file size but makes the code harder to debug. Use the 'Keep Names' option to preserve names for production debugging.

How does the ECMA target option work?

The ECMA target (ES2015, ES2016, ES2020, ES2022) tells Terser which JavaScript version to target when minifying. Choosing an older version ensures the minified code works in older browsers. For example, targeting ES2015 will transpile modern syntax like async/await and optional chaining to older equivalents.

What does the trailing comma option do?

The trailing comma option controls whether trailing commas are added to objects, arrays, and function parameters. 'ES5' is the default and adds trailing commas where safe. 'All' adds them everywhere (including function parameters). 'None' removes all trailing commas. Trailing commas make version control diffs cleaner and reduce merge conflicts.

Should I remove console.log statements?

For production deployment, yes — removing console statements reduces file size slightly and prevents leaking debugging information. Enable the 'Remove Console' option to strip all console.log, console.error, console.warn, and other console calls during minification.

What JavaScript validation checks are performed?

The validator uses Prettier's parser to detect: unclosed braces, brackets, or parentheses, invalid syntax, malformed expressions, unexpected tokens, and undeclared variables (in some modes). Each error includes its severity, line number, and column position for quick fixing.

Does the minifier handle React JSX?

Yes. The tool uses Prettier's Babel parser which fully supports JSX syntax. You can format React components, Vue templates with JSX, and other framework code. The minifier also processes JSX correctly, though you typically use a dedicated bundler like Webpack or Vite for React apps.

Can I format and minify TypeScript?

Currently, this tool focuses on JavaScript. For TypeScript, use the dedicated TypeScript formatter or first compile TypeScript to JavaScript then use this tool. Future updates may add TypeScript support via Prettier's TypeScript plugin.

How much does minification reduce file size?

Minification typically reduces JavaScript file sizes by 30-60% depending on the code. Removing whitespace and comments accounts for about 20-30% reduction. Variable mangling adds another 10-30% reduction. The compression percentage is displayed as a meta badge after minification.

What does the print width setting do?

Print width controls how long lines can get before Prettier wraps them. The default is 80 characters, matching most code style guides. Increase it for longer lines or decrease it for narrower code blocks. Prettier intelligently wraps at operator positions and chooses optimal break points.

Can I preserve copyright and license comments?

Yes. Enable the 'Preserve License Comments' option when minifying to keep comments that start with '!' or contain license/copyright text. This is required for open-source licenses that mandate preserving attribution in distributed code.

What is auto-format with debounce?

Auto-format automatically beautifies your code as you type. The 300ms debounce means formatting triggers 300ms after you stop typing, preventing performance issues during rapid typing while still providing near-instant feedback. Toggle this on for a live formatting experience.

Can I upload a JavaScript file?

Yes. Click the upload icon in the input panel header to select a .js file from your computer. You can also drag and drop files directly onto the input area. The file contents are loaded for formatting or minification.

Does it work offline?

Yes. All formatting logic (Prettier and Terser) is bundled with the page as pure JavaScript. Once the page has loaded, the JS Minifier / Beautifier works without an internet connection — no network requests are made during processing.

What's the difference between compress and mangle?

Compress removes dead code, evaluates constant expressions, and performs other optimizations. Mangle shortens variable and function names. Both reduce file size but in different ways. You can enable/disable each independently using the toggles in the minify options panel.

JS Minifier / Beautifier

Popular Web Code tools

How to JS Minifier / Beautifier Online

JS Minifier / Beautifier Features

In-Depth Technical Guides

De-minifying Production Stack Traces: Source Map Resolution Guide

Frontend Bundle Size Optimization: Tree-Shaking, Chunk Splitting & Dead Code Elimination

Related Standards & RFC Specifications

Pre-built Automation Pipelines

Base64 Decode → JSON Format

CSV → JSON → YAML

JSON Format → TypeScript Schema

Example Input & Output

Sample Input (text)

Sample Output

What happened:

Frequently Asked Questions

Related Developer Tools

Developer Reference & Learning Hubs

JS Minifier / Beautifier

Popular Web Code tools

How to JS Minifier / Beautifier Online

JS Minifier / Beautifier Features

In-Depth Technical Guides

De-minifying Production Stack Traces: Source Map Resolution Guide

Frontend Bundle Size Optimization: Tree-Shaking, Chunk Splitting & Dead Code Elimination

Related Standards & RFC Specifications

Pre-built Automation Pipelines

Base64 Decode → JSON Format

CSV → JSON → YAML

JSON Format → TypeScript Schema

Example Input & Output

Sample Input (text)

Sample Output

What happened:

Frequently Asked Questions

Related Developer Tools

Developer Reference & Learning Hubs