JavaScript Beautifier and Minifier
Format messy or minified JavaScript, TypeScript and JSX with js-beautify, or strip comments and whitespace safely. Runs in your browser, nothing is uploaded.
The interactive tool loads here when JavaScript runs.
About this toolWhat is the JavaScript Beautifier and Minifier?
Paste JavaScript, TypeScript or JSX and this tool re-indents it into readable code as you type, using js-beautify, the open-source engine behind beautifier.io. It is the quick way to read a one-line bundle from production, tidy a snippet copied from a chat, or normalise indentation before a code review. Choose 2 spaces, 4 spaces or tabs, the brace style your team uses, and whether chained calls such as .then().catch() go on their own lines.
Switch to Minify and the same input loses its comments and every whitespace character that JavaScript does not need. The minifier works on tokens, so it never renames a variable or rewrites an expression, and it keeps a line break wherever removing it could change automatic semicolon insertion. After either operation the tool re-reads the output and compares it with your input token by token, and warns you if anything other than spacing changed.
Everything runs locally in your browser tab. Source code you paste, including keys or internal URLs that might be inside it, is not uploaded anywhere.
- js-beautify engine with indent, brace style, blank-line and chained-call options
- TypeScript mode that keeps generics, optional markers and arrow types valid
- Token-level minifier that respects automatic semicolon insertion
- Keeps /*! licence comments on request
- Every result re-lexed and compared with the input
- Size before and after, copy, download and swap
- Runs entirely in your browser
How to use the JavaScript Beautifier and Minifier
- Paste your code into the input box, or keep the sample to see how it works. The output updates as you type.
- Pick the language. TypeScript turns on the generic and interface fix-ups; JSX keeps markup intact but can only be beautified.
- For Beautify, choose the indent, how many blank lines to keep, the brace style and whether to break chained method calls.
- For Minify, decide whether to keep /*! licence comments, which most licences ask you to preserve in distributed files.
- Copy or download the result, or press the swap button to feed the output back in as the new input.
Worked examples
One-line arrow function
Input
const f=(a,b)=>{if(a>b){return a}return b};Output
const f = (a, b) => {
if (a > b) {
return a
}
return b
};Spaces go around operators and after commas, and each statement gets its own line. Missing semicolons are not added; the formatter changes layout only.
TypeScript generic arrow
Input
const get=async<T,>(u:string):Promise<T>=>{const r=await fetch(u);return r.json() as Promise<T>}Output
const get = async<T,>(u: string): Promise<T> => {
const r = await fetch(u);
return r.json() as Promise<T>
}Plain js-beautify would print Promise < T >= >. TypeScript mode keeps the generics tight and the arrow intact, so the output still compiles.
Line breaks that must survive minification
Input
let total = price ++count return value
Output
let total=price ++count return value
Both line breaks stay. Without the first, ++ would apply to price; without the second, return would return value instead of undefined.
Minifying lodash 4.18.1
Input
lodash.js, 545,945 bytes with full JSDoc comments
Output
149,537 bytes, 72.6% smaller, identical tokens
Most of lodash's source is documentation, so comment removal does most of the work. A library with few comments, such as Papa Parse 5.7.0, shrinks by 34%.
Background and insight
js-beautify began as Einar Lielmanis's jsbeautifier.org project and is still one of the most used formatters on npm. Unlike Prettier, which parses code into a syntax tree and prints it again in one fixed style, js-beautify works from a token stream and respects much of your existing layout, such as blank lines between functions. That makes it forgiving with code that does not fully parse and gives you more knobs, at the price of being less opinionated.
js-beautify was written for JavaScript. With TypeScript it treats the angle brackets of generics as comparison operators and would print Promise<T>=> as Promise < T >= >, which no longer compiles. The TypeScript mode here corrects for that: it splits >=> into > and => before formatting, puts generic brackets and optional ?: markers back the way you wrote them, and moves the semicolon-separated members of interfaces and type literals onto their own lines. The result is checked with the TypeScript parser in our test suite for generics, decorators, non-null assertions, satisfies and private fields.
Minification has a trap that many quick tools fall into: JavaScript inserts semicolons at some line breaks (ECMA-262 calls this automatic semicolon insertion). A line break after return, throw, break, continue or yield ends the statement, and a line break before ++ or -- attaches the operator to the next line. Joining "let b = a" and "++b" onto one line would turn a pre-increment of b into a syntax error. The minifier only removes a line break when the tokens on either side make semicolon insertion impossible, for example after a comma, an opening brace or an operator, or before a closing bracket, a dot or a binary operator.
Common use cases
Reading production bundles
Unminify a script from a website or an error report so you can follow the logic and find the line a stack trace points at.
Cleaning up pasted snippets
Normalise indentation in code copied from Stack Overflow, a chat or an AI assistant before it goes into your project.
Quick size reduction
Minify an inline script, a bookmarklet or a small widget when there is no build step to run terser or esbuild.
Stripping comments before sharing
Remove internal comments from a file you are about to send to a client or paste into a public issue.
Teaching and reviewing
Show students or reviewers consistently formatted code regardless of how it was typed.
Tips and limitations
- The minifier does not shorten names or remove dead code. For production bundles use terser, esbuild or SWC in your build, which typically save another 30 to 50% on top of whitespace removal.
- Gzip and Brotli already compress whitespace well, so the transfer saving from whitespace-only minification is smaller than the raw byte saving shown here.
- A "/" right after a closing parenthesis is read as division. Code such as if (x) /re/.test(s) is rare but would be tokenised wrongly; add braces or a variable if the warning appears.
- Formatting does not add missing semicolons. If your team relies on them, run a linter with a semi rule after formatting.
- For TypeScript-heavy projects with an agreed style, Prettier in your editor gives fully consistent output. Use this page for one-off jobs and code you cannot run tools on.
- Very large files (several megabytes) format in a second or two; the page waits for you to stop typing before it reformats.
Frequently asked questions
Is it safe to paste proprietary code here?
The formatting and minification run in JavaScript inside your browser tab. The code is not sent to a server, logged or stored, and closing the tab discards it.
What is the difference between this minifier and terser?
This tool only removes comments and whitespace, so it can never change behaviour. Terser and esbuild also rename local variables, drop unreachable code and rewrite expressions, which saves much more but needs a parser that fully understands your syntax and target.
Can I unminify JavaScript back to the original source?
You get the original structure and readable indentation, but not the original variable names or comments, because a real minifier discarded them. If the site ships a source map, your browser's developer tools can show the original files.
Does the beautifier support TypeScript and JSX?
Yes. Choose TypeScript for .ts files, which fixes the cases where js-beautify would mangle generics, and JSX for React components, which keeps the markup as written. JSX cannot be minified here because the markup has to be compiled first.
Why did the minifier leave some line breaks in?
Those are places where JavaScript's automatic semicolon insertion depends on the line break, for example after return or before ++. Removing them would change what the code does, so they stay.
Which brace style should I pick?
Same line (K&R or 1TBS) is the default in most JavaScript style guides, including Airbnb, Google and StandardJS. Allman puts every opening brace on its own line and is common in C# codebases.
What does "check the output" mean when it appears?
After formatting, the tool compares the code tokens of the input and output. If they differ, something other than whitespace changed, usually because the input has a syntax error the formatter guessed around. Fix the input or review the highlighted output before using it.
Is there an in-depth guide to the JavaScript Beautifier and Minifier?
Yes. “Beautifying and Minifying JavaScript Without Breaking It” covers the background, how it works, common pitfalls and worked examples. Read the full guide.
People also search for
- unminify javascript code online
- format typescript code without installing prettier
- js beautifier with tab indentation
- remove comments from javascript file
- why does minified javascript break without semicolons
- beautify one line javascript from a bundle
- allman brace style javascript formatter
- how much smaller is minified javascript
Related Tools You May Like
Free, in-browser tools that pair well with this one.