JavaScript Formatter & Beautifier
Enjoying this tool?
Part of Code formatters
JavaScript formatter: beautify and minify JS in your browser
A JavaScript formatter turns minified bundles or messy paste-ins into indented code you can read during code review, interview prep, or incident response. Minify mode compresses scripts when you want a quick size estimate—not for shipping production bundles without a proper toolchain.
Parsing uses the same grammar expectations as modern browsers for standard ECMAScript syntax. TypeScript, JSX, and stage-3 proposals may need the dedicated TypeScript formatter if the parser rejects them here.
How to use this converter
- Paste JavaScript—functions, modules, or bookmarklet snippets.
- Set indent width and format to expand blocks and line breaks.
- Minify for a compact single-line version when testing embed size.
- Copy results back to your editor; run ESLint or TypeScript for semantics.
Before and after examples
| Original | Converted | Notes |
|---|---|---|
| function add(a,b){return a+b} | Indented function body | Simple function |
| const x={foo:1,bar:2} | Expanded object literal | Object property line breaks |
Syntax errors vs style preferences
If the formatter cannot parse your paste, you likely have a missing bracket, an invalid `await` placement, or JSX in a `.js` file. Fix syntax first—formatting cannot invent missing tokens. Style choices (semicolons, quote style) follow the formatter defaults, which may differ from Prettier in your repo; treat output as a readability pass, not an authoritative style guide.
Modules, IIFE, and browser snippets
ES modules with `import`/`export`, classic script tags, and immediately invoked function expressions all format the same way: block indentation reflects brace nesting. Dynamic `import()` and top-level await in modules are supported when the underlying parser accepts them.
Do not paste secrets (API keys in fetch headers) into shared screens while formatting. Processing stays local, but shoulder surfing and clipboard history still apply.
When to use the TypeScript formatter instead
React `.tsx` components, typed interfaces, and `enum` declarations belong on the TypeScript formatter page. Plain `.js` React files without types can often be formatted here. JSON embedded in JS template literals should be validated with the JSON formatter separately.
Frequently asked questions
Does JavaScript Formatter type-check code?
No. It only adjusts layout. Use `tsc` or your IDE for type errors.
Can I format JSX in a .js file?
Sometimes, but JSX-heavy files are more reliable on the TypeScript formatter page.
Will minify rename variables?
No. This minifier removes whitespace only; it does not mangle names like terser or esbuild.
Is code sent to a server?
No. Formatting runs in this browser tab.