JavaScript Formatter
Format & beautify JavaScript with Prettier — live, with arrow-paren and bracket-spacing control, precise code-frame errors and before/after stats.
About this ToolHow it works, benefits & use casesTap to collapse
Beautify messy or minified JavaScript using Prettier, the same opinionated formatter most teams run in their editors and CI. Paste your code and it reformats live, with full control over the style: set the print width and tab width, choose tabs or spaces, toggle single versus double quotes, semicolons, and bracket spacing, pick a trailing-comma policy (none, ES5, or all), and decide whether arrow functions always wrap their parameter in parentheses or avoid them when possible. Because it parses with Prettier’s babel parser, a syntax error is reported with a precise line and column plus a code-frame snippet that points a caret at the problem. A stats line shows the before/after line and byte counts, and a confirmation appears when your input was already formatted. Everything runs in your browser — no upload, no sign-up.
How to Use
- 1Set your style in the Options panel: print width, tab width, tabs or spaces, single quotes, semicolons, bracket spacing, trailing-comma policy, and arrow-paren behaviour.
- 2Paste your JavaScript into the input box, or click Load example to load an unformatted sample.
- 3The formatted output updates live as you type or change options.
- 4Press Format JavaScript to confirm the result; if there is a syntax error you get the message with line, column, and a caret code-frame.
- 5Copy the formatted code, download it as formatted.js, or share the URL — your code and every option are encoded in the link.
Key Benefits
- Powered by Prettier’s babel parser for industry-standard, consistent formatting
- Fine-grained control: print width, tab width, quotes, semicolons, bracket spacing, trailing commas, arrow parens
- Syntax errors reported with exact line, column, and a caret code-frame snippet
- Before/after line and byte stats, plus an "already formatted" confirmation
- Live reformatting as you edit code or adjust options
- Shareable URL captures your code and all formatting options for handoff
- Runs entirely in-browser — your source code is never uploaded
Common Use Cases
- Cleaning up minified or one-line JavaScript into readable, indented code
- Matching a project’s Prettier style before committing or opening a pull request
- Standardising snippets pasted from chats, gists, or Stack Overflow
- Teaching or reviewing code with consistent, predictable formatting
- Experimenting with print width and arrow-paren options to see their effect
Options
0 characters · live
Paste JavaScript above to format it live.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- cURL to Code ConverterConvert cURL commands to code in various languages
- Tailwind Config GeneratorVisually build a Tailwind config - theme extend, colors, spacing, fonts, screens, plugins - and export it as a v3 JS config or a v4 @theme CSS block
- Console.log RemoverRemove console statements from your JavaScript code
- Google Analytics Event BuilderBuild valid GA4 events from Google’s recommended-event catalog with auto-filled parameter schemas, a structured items[] editor, live validation against GA4’s real rules, and gtag/dataLayer/React/Measurement Protocol output
- Geolocation Mock GeneratorSeeded coordinates and routes with a map preview; export navigator override, Playwright, Puppeteer, or GeoJSON
- Browser Feature DetectorSee live which modern CSS/JS/Web-API features your browser supports, then generate copy-paste feature-detection code (@supports + JS guards) with fallback guidance — not UA sniffing
It uses Prettier with the babel parser, loaded on demand in your browser. That is the same formatter and parser used by most JavaScript projects, so the output matches what you would get from running Prettier locally with equivalent options.
You can set print width and tab width, switch between tabs and spaces, toggle single quotes, semicolons, and bracket spacing, choose a trailing-comma policy (None, ES5, or All), and pick whether arrow-function parameters are always parenthesised, as in (x) =>, or kept bare, as in x =>.