How to beautify JavaScript online, free and without uploading
To beautify JavaScript, paste your minified or messy code into the JavaScript Input box. The Formatted Output box fills in about 0.15 seconds after you stop typing, or straight away when you click Beautify. It shows one statement per line, indented blocks and syntax colours. Choose Indent (2 spaces, 4 spaces or Tab) and Brace style (K&R or Allman) above the boxes, then click Copy Formatted or Download .js to save beautified.js. Only whitespace changes: strings, regular expressions, template literals, JSX and your semicolons stay exactly as written.
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). The formatter is part of the page script, so private or unreleased code stays on your device. There is no account and nothing to install.
A JavaScript beautifier, also called a formatter or pretty printer, adds the line breaks and indentation that a minifier removes. It is a quick way to read a bundled file while you debug. It cannot restore what minification removed for good, such as comments and the original names of variables.
To shrink code again, use the JavaScript minifier. Other languages have their own formatters: the HTML beautifier, the CSS beautifier, the SQL formatter and the JSON formatter.
Table of Use: settings and what stays as written
| Setting or code | Result | Note |
|---|---|---|
| Indent | 2 spaces (default), 4 spaces or Tab | The width of one indent level; Tab writes one tab character per level |
| Brace style | K&R (default) or Allman | K&R keeps the opening brace on the same line; Allman moves each block brace to its own line |
| Keep existing line breaks | On by default | On keeps your line breaks and single blank lines. Off lets the beautifier choose them and removes blank lines |
| Show line numbers | On by default | Display only; Copy Formatted and Download .js never include the numbers |
| Strings, template literals, regular expressions | Unchanged | Kept exactly as written, so a regex such as /'/g is never mistaken for a string |
| JSX | Unchanged | Kept as written and not re-indented; the JavaScript around it is formatted |
| Semicolons and quotes | Unchanged | None are added, removed or swapped; code written without semicolons stays that way |
| Comments | Kept | Line and block comments stay; the leading * lines of a block comment are re-indented |
| Code it cannot read | Error message | No output is produced and the message names the line and column |
To check what a regular expression in the code matches, paste it into the regex tester.
Features
- Formats as you type. The output refreshes about 0.15 seconds after you stop typing, or 0.4 seconds when the input is over 200,000 characters. Beautify runs it again and is disabled while the input is empty.
- Highlighted output with line numbers. Comments, strings, regular expressions, numbers, JSX and keywords each get their own colour. Above 5,000 lines of output, highlighting and line numbers switch off and a note says so.
- Modern syntax. Private fields, static blocks, async generators, optional chaining,
??, numeric separators, BigInt, labels, a hashbang line and JSX are all read correctly. - Safe for code without semicolons. A line break that could be ending a statement is never removed, and none is added where JavaScript forbids one: after
return,throw,break,continueoryield, or before a postfix++or--. - Errors with a position. A message such as Unterminated string at line 1, column 11 appears in a red box, and the output stays empty until the code can be read.
- Size counters. Each box shows its line and character count. The built-in sample goes from 1 line and 768 characters to 31 lines and 944 characters.
- Copy, download, clear. Copy Formatted copies the code without line numbers. Download .js saves
beautified.jswith a final newline. Clear empties both boxes.
How to use the JavaScript beautifier
- Paste your code into the JavaScript Input box, or edit the sample that is already there. Click Clear first to empty it.
- Under Formatting Options, set Indent to 2 spaces, 4 spaces or Tab.
- Set Brace style to K&R (opening brace on same line) or Allman (braces on new line).
- Leave Keep existing line breaks ticked to retain your own breaks and blank lines, or untick it to let the beautifier choose them.
- Read the result in Formatted Output, and tick or untick Show line numbers. If a red message appears, fix the line and column it names.
- Click Copy Formatted to copy the code, or Download .js to save
beautified.js.
Who can use it
- Developers debugging production code who need to read a minified bundle, then compare two versions of it in the text diff tool.
- Front-end developers tidying a snippet pasted from a colleague, an old project or a theme file before they edit it.
- TypeScript users who compile with the TypeScript to JavaScript converter and want the output laid out their way.
- Teachers and writers preparing code samples, which they can then style with the code syntax highlighter.
- Students learning from a minified example, who can see its structure once it is indented.
FAQs
How do I beautify JavaScript online?
Paste your code into the JavaScript Input box. The Formatted Output box fills in about 0.15 seconds after you stop typing, or straight away when you click Beautify. Pick Indent (2 spaces, 4 spaces or Tab) and Brace style first if you want something other than the defaults. Then click Copy Formatted to copy the code, or Download .js to save beautified.js.
Can I unminify minified JavaScript with it?
Yes, for layout. Minified code is put back on separate lines with indented blocks, so you can read the logic. A minifier also removes comments and often shortens variable names, and no formatter can bring those back. You will see names like a and t where the original had longer ones, and the formatter will not guess them.
Does beautifying change what my code does?
It is built to change only whitespace. Strings, template literals, regular expressions, JSX, semicolons and quotes are written out exactly as you gave them. The beautifier never removes a line break that could end a statement in code without semicolons, and it adds none where JavaScript forbids one, such as after return. Run your tests on the result before you ship it.
Does it handle JSX and modern JavaScript?
Yes. It handles classes with private fields and static blocks, async functions and generators, optional chaining, the ?? operator, numeric separators, BigInt, labels and a hashbang line. JSX is kept exactly as written rather than re-indented. It is a JavaScript formatter, so TypeScript-only syntax such as type annotations is not a supported feature.
What is the difference between K&R and Allman brace style?
K&R, the default, keeps the opening brace at the end of the line, as in if (ok) {. Allman puts the opening brace of each block on its own line, and else or catch starts on a new line after a closing brace. Object literals and import lists are not affected. Both styles produce the same program; the choice is only about looks.
Why do I get an error instead of formatted code?
The beautifier stops when it cannot read the code, for example an unterminated string, comment, template literal or regular expression, an unclosed JSX element, or a bracket that is missing or in the wrong place. The message gives the line and column. It reads the code in tokens and is not a full syntax checker, so other mistakes pass through unchanged.
Is my JavaScript uploaded to a server?
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). The formatter is part of the page script, so your code is formatted on your own device. Nothing is sent to ZipConvert or anyone else, which makes it safe for private or unreleased code.