Free online JavaScript formatter and beautifier. Paste minified or messy JS to instantly format it with 2-space, 4-space, or tab indentation. Client-side.
Paste JavaScript into the left pane and the formatted version appears on the right as you type. There is no upload step and no Format button to press — the tool re-runs on every keystroke and on every option change. Everything happens inside your own browser tab using the js-beautify library, so the code never leaves your machine. That matters if what you are pasting is a work file, an unreleased feature branch, or a bundle you pulled out of a customer's site.
The common reason people arrive here is a wall of minified code. You opened DevTools, found the line that threw, and the whole bundle is one line, so the column number in the stack trace is a five-digit number that tells you nothing. Beautifying it does not give you the original source — only a source map does that — but it does turn one unreadable line into a few hundred readable ones, with a line number that a stack trace can point at. That is usually enough to find the function that is misbehaving.
Beautify is a whitespace and line-break operation. It does not rewrite your logic, rename anything, or delete anything. Concretely, the tool:
if(!users||!users.length) becomes if (!users || !users.length).There are exactly three, chosen from the Indent dropdown, which only appears in Beautify mode:
| Option | What it emits | Typical fit |
|---|---|---|
| 2 spaces | Two space characters per level (default) | Node, React, most modern JS style guides |
| 4 spaces | Four space characters per level | Older codebases, jQuery-era style, teams sharing a Java/C# convention |
| Tab | One literal tab character per level | Repos with a .editorconfig that sets indent_style = tab, or accessibility-minded teams who want readers to set their own width |
Tab indentation writes real U+0009 characters, not spaces. If you paste the result into an editor that renders tabs at eight columns, deeply nested code will look far wider than it did here. That is a display setting on your side, not a change in the output.
The Load sample button fills the input with a deliberately squashed function. Input:
function greet(users){if(!users||!users.length){return 'nobody here';}
With 2-space indent, the tool returns:
function greet(users) { if (!users || !users.length) { return 'nobody here'; }Note what did not change: the single quotes stayed single quotes, function stayed a function expression rather than being converted to an arrow, and the string contents are byte-identical. A beautifier is not a code-style converter.
Reformatting JavaScript raises a genuine fear about automatic semicolon insertion. JavaScript ends statements at certain newlines whether you wrote a semicolon or not, so a tool that moves line breaks around could in principle change what your program means — the classic case being a return value pushed onto the next line, which silently becomes return undefined.
This tool does not add or remove semicolons. If you feed it function f(){return 1} you get back return 1 with no semicolon, exactly as written. It also never breaks a line between return and its expression. So the beautifier will not introduce an ASI bug into code that did not already have one.
What it will do is make an existing ASI hazard visible. Semicolon-free code that relied on everything sitting on one line is now spread over many lines, and a line starting with ( or [ will read as a continuation of the previous line. That is how the source already behaved; the formatting just stops hiding it.
Beautify keeps every comment. Block comments are moved onto their own line at the correct indent level, and a trailing // comment stays on the end of the line it annotates:
/* block */function f() { /*inner*/ return 1; //trail}Template literals are left completely alone, which is the correct behaviour but occasionally surprises people. Whitespace inside backticks is part of the string value, so the formatter cannot re-indent it without changing what your program outputs. A multi-line template stays flush against the left margin even when the surrounding code is indented four levels deep, and an interpolation such as ${x?'y':'z'} keeps its cramped spacing rather than being expanded to x ? 'y' : 'z'. Regular strings, and regex literals, are likewise passed through untouched.
The formatter handles current JavaScript, not just ES5. Class fields, private # members, static initialisation blocks, getters, arrow functions, optional chaining, and JSX-adjacent syntax all indent correctly. An empty function body such as const g = () => {}; is left on one line rather than being exploded into three.
[{name:'Ada'},{name:'Linus'}], comes back with each property on its own line. On a long fixture array that is a lot of vertical space. There is no "keep short objects inline" option here; if you want that, it is a Prettier printWidth decision.function declaration get separated by a blank line.! gets a space. The bang-IIFE pattern common in UMD bundles, !function(e,t){...}, formats as ! function(e, t) {. It is still valid and behaves identically; it just looks odd.Running the output back through the formatter with the same indent setting produces exactly the same text. That is worth knowing when you are using this to normalise two versions of a file before diffing them: as long as both sides use the same indent option, the diff will show only real changes and no whitespace churn. Switching indent size between runs obviously does change the output, so pick one and stay with it.
Beautify is lenient. Give it a truncated snippet such as function f({ and it will not refuse — it emits what it can and stops. That is useful when you have copied a fragment out of a stack trace and only want the middle of it readable, but it also means a clean-looking result is not proof that your JavaScript parses. The status bar simply says "Beautified"; it is not a syntax check. If you need to know whether the code is valid, switch to Minify: that path parses the file properly and reports failures with a position, for example Unexpected token: eof (line 1, col 12).
The toggle at the top left switches direction. Beautify expands; Minify compresses, reporting the before and after byte counts and the percentage saved. If your task is specifically shrinking a file for production — variable mangling, comment stripping, source-map questions — the JavaScript Minifier is the same widget opened on that tab and covers it properly.
| You want to | Do this |
|---|---|
| Read a minified vendor bundle | Paste it, Beautify, 2 spaces. Search the readable output for the failing function name. |
| Match a repo that uses tabs | Beautify with Indent set to Tab, then paste back over the file. |
| Normalise a snippet before a diff | Beautify both versions with the same indent setting, then diff. Whitespace-only noise disappears. |
| Clean up code copied from a PDF or slide | Beautify. Line breaks and indent are rebuilt from the syntax, not from the original layout. |
| Check whether a file parses | Switch to Minify and read the error message, which includes a line and column. |
| Prepare code for a blog post or docs | Beautify with 2 spaces, then copy with the Copy button. |
No. The formatting library is loaded into your browser and runs there. Nothing you paste is sent to a server, logged, or stored, and closing the tab discards it. Because it is local, it also works with no network connection once the page has loaded, and there is no file-size ceiling other than what your browser tab can hold in memory — very large bundles will simply feel slower, since the tool re-formats on every keystroke.
This is a paste-and-go tool for one file at a time. For an actual codebase you want Prettier or an equivalent wired into your editor and your pre-commit hook, so formatting is enforced rather than applied by hand. A configured formatter also decides quote style, trailing commas, arrow-parenthesis style, and line width — none of which this tool touches. Use this page when you are mid-task, away from your own machine, or dealing with code that never belonged to your repo in the first place.
A JavaScript formatter, also called a beautifier, rewrites the layout of your code so it is easy to read. It adds consistent indentation, puts one statement per line, and applies predictable spacing around operators and braces. It changes only whitespace and line breaks — your code's behaviour is completely unchanged.
No. Beautifying is purely a presentation operation. The tool never renames variables, removes statements, or alters logic — it only adjusts indentation, spacing, and line breaks. The formatted output behaves identically to the input.
Yes. Pasting minified, single-line JavaScript is the most common use. The formatter expands it back into readable, indented source so you can study or debug a production bundle. Note that very long chained expressions stay on one logical line — beautifying adds structure but does not split a single complex statement into several.
No. Formatting runs entirely in your browser using JavaScript. Nothing you paste is sent to a server, so it is safe to use with proprietary or sensitive source code.
Yes. You can format with 2-space indentation, 4-space indentation, or tabs to match your project's style guide. The output updates instantly when you change the setting.