What the JavaScript formatter and beautifier does
The formatter reads your code as tokens — words, numbers, punctuation, strings, template literals, regular-expression literals and comments — and then rebuilds the line breaks and indentation:
- A new line after every
{and before every}, so each block gets its own indented body. Empty blocks stay{}. - A new line after every
;that ends a statement. Semicolons inside afor (;;)header are left alone. } else {,} catch (e) {,} finally {,} while (x);,});and},stay on one line.- Indentation follows real nesting depth, including arrays and call arguments that span several lines.
- Everything inside a string, template literal, regex or comment is copied unchanged, so a
{or;in"a{b;c",`${x}`or/[{;]/gnever causes a break.
Your own spacing inside a line, your quotes and your semicolons are kept. If the input is valid JSON it is pretty-printed as JSON instead.
It never runs the code
Unlike a REPL or a “run” playground, this viewer never calls eval or new Function, never injects the code into the page, and never loads anything it references. That makes it a reasonable first look at a snippet you do not trust — a gist, a chat answer, a chunk of a third-party bundle — before deciding whether to run it somewhere else.
Worked example
Input (minified):
function add(a,b){if(a>b){return a;}else{return b;}}const re=/[{;]/g;Pretty printed with 4 spaces:
function add(a,b) {
if(a>b) {
return a;
} else {
return b;
}
}
const re=/[{;]/g;Un-minifying and reading bundles
A minified bundle becomes readable blocks and statements, which is usually enough to find a function, a string or an API URL. Two limits: minified names (a, e, t) stay minified because the originals are not in the file, and very long expressions joined with commas or && stay on one line. If the site ships a source map (//# sourceMappingURL=), your browser’s dev tools can show the original source instead.
When to use it
Eyeballing a pasted snippet, reading a bookmarklet or an inline <script>, reviewing a vendor file, or reformatting code from a chat message before you paste it into your editor. For code you keep, run your project’s formatter (Prettier, ESLint --fix, or your editor’s) so it matches your team’s style.
Common questions
How do I format or beautify JavaScript online?
Paste your JavaScript into the input box. The pretty-printed code appears as you type, one statement per line and indented by nesting depth, with syntax colours and line numbers. Pick 2 spaces, 4 spaces or tabs, then copy the formatted code or download it as a .js file.
Does this viewer execute or lint the code?
No. It never calls eval or new Function and never runs the input. It only tokenizes and reformats whitespace, so it is safe for a first look at an unfamiliar snippet. It also does not report syntax errors; use a JavaScript validator for that.
Can it un-minify a bundle?
Yes, it breaks a one-line bundle into indented blocks and statements so you can read its structure. Minified variable names stay short, because the original names are not stored in the file. A source map is the only way to get them back.
Will it break strings, regular expressions or template literals?
No. Strings, template literals including ${} expressions, regular expression literals and comments are read as whole tokens and copied unchanged, so a brace or semicolon inside them never causes a line break.
What is the difference between this and Prettier?
Prettier parses the code into a syntax tree and reprints it with its own rules for line length, quotes and semicolons. This formatter keeps your tokens, quotes and spacing and only changes line breaks and indentation, which makes it fast, dependency-free and safe for any snippet, including code with syntax errors.
Is my code uploaded?
No. It stays in your browser and is never sent anywhere.