JavaScript Formatter & Minifier
Beautify minified or messy JavaScript, JSX or TypeScript into readable code, or minify JavaScript with Terser for production.
Formatted with Prettier in your browser; your code is never uploaded.
Related Developer Tools
This JavaScript formatter makes compressed or inconsistently written code readable: a minified script from a website, a snippet from a forum or code written without a formatter. It uses Prettier and understands modern JavaScript, JSX and TypeScript. Switch to Minify to shrink finished JavaScript with Terser before you publish it.
Beautify and Minify Examples
Beautified
function greet(name){if(!name){return 'Hello, stranger'}return `Hello, ${name}!`}function greet(name) {
if (!name) {
return "Hello, stranger";
}
return `Hello, ${name}!`;
}Minified with Terser
/*! greet.js | MIT */
function greet(e){return e?`Hello, ${e}!`:"Hello, stranger"}console.log(greet("Ana"));The if statement became a ternary, the parameter was renamed to e, the comment inside the function was dropped and the license comment kept. The function name stays because other code may call it.
Formatting Options
- Line width is where Prettier tries to wrap long lines: function arguments, arrays and object literals that do not fit are split one item per line. 80 is Prettier's default; 100 or 120 suit wide screens.
- Semicolons: JavaScript inserts missing semicolons automatically, so both styles work. With semicolons off, Prettier still adds one where leaving it out would change the meaning, such as before a line starting with
(or[. - Single quotes switches string quotes; a string that contains the other quote keeps whichever needs fewer escapes. JSX attributes always use double quotes.
Related Tools
Format the page with the HTML formatter and its styles with the CSS formatter, pretty-print an API response with the JSON formatter, generate types for it with JSON to TypeScript, or test a regular expression in the regex tester.
Frequently Asked Questions
How do I beautify JavaScript?
Paste the code, or open a .js file, and the formatted version appears as you type. Choose the indentation, line width, whether statements end with semicolons and whether strings use single or double quotes, then copy or download the result. Choose TypeScript / TSX under Language for code with type annotations.
Can it unminify JavaScript?
It restores the layout: line breaks, indentation and spacing, so a one-line bundle becomes readable again. It cannot bring back what minifying threw away: comments are gone and shortened variable names like e and n stay short. If the site publishes a source map (.js.map), browser dev tools can show the original code.
What does Minify do to JavaScript?
It runs Terser, the minifier used by webpack and many other build tools. Terser removes whitespace and comments, simplifies code (dead branches, if statements that can be a ternary) and, with Shorten variable names, renames local variables to single letters. Global names, object properties and exported names are not renamed, so other scripts that use them keep working. License comments, such as those starting with /*! or containing @license, are kept unless you turn that off.
Why does it show a syntax error?
The code could not be parsed. The message shows the line and column of the first problem, often a missing bracket, a stray comma or a typo in a keyword. If the code has type annotations such as : string, choose TypeScript under Language; JSX (<div> in JavaScript) works with JavaScript selected.
Can I minify TypeScript?
Not directly. TypeScript is compiled to JavaScript first (by tsc, esbuild or your bundler), and then the JavaScript is minified. Paste the compiled JavaScript here to minify it.
Does formatting change how my code runs?
No. Prettier only changes layout: spaces, line breaks, semicolons and quote style. It adds parentheses only where they make the existing order of operations clearer, without changing it. Minifying changes the code more, but Terser's changes keep the behaviour the same.
Is my code uploaded?
No. Prettier and Terser run in your browser in a background thread, so your code never leaves your device.