JavaScript Formatter
Format and beautify JavaScript.
Loading…
About JavaScript Formatter
A snippet lifted from a bundle, a bookmarklet or a log is almost impossible to read until each statement has its own line. Paste it and press Format / Beautify: the code is re-indented with two spaces, opening braces stay on the same line, and statements are split across lines. Variable names stay as short as they were, because only whitespace changes, and the text is formatted without ever being run. Syntax errors are not reported, so broken code is laid out as far as it can be.
Features
- Re-indents with two spaces and splits statements onto separate lines
- Keeps opening braces on the same line
- Quotes, names and semicolons are left as written
- Handles arrow functions, async and await, classes and template literals
- The code is only formatted as text and is never executed
Limitations
- Only whitespace changes: minified variable names are not restored, removed comments do not come back, and missing semicolons are not added.
- JSX comes out mangled, and TypeScript is not specifically supported, so use plain JavaScript.
- The indent is fixed at two spaces, and syntax errors are not detected, because the Valid marker only means the formatter finished.
How it works
- Paste the JavaScript into the JavaScript Input panel.
- Select Format / Beautify.
- Read the Formatted JS panel.
- Use Copy Output to copy the code, or Clear All to start again.
Example input
function add(a,b){return a+b;}
const result=add(2,3);Frequently asked questions
- The layout, yes: you get indentation and one statement per line. The names will still be single letters, since a formatter cannot know what they used to be. A source map is the only way to get originals back.
- No. Code like function ( { var = ; is still laid out without an error message, and the Valid marker only means the beautifier finished. Run the code through your editor or linter to find real mistakes.
- The beautifier is configured for plain JavaScript, so it reads angle brackets in JSX as comparison operators and inserts spaces around them. Format JSX files in your editor with a tool that understands it.
- Neither. The text goes through the js-beautify library on the page and comes back as new text, so nothing in it is evaluated. Only the Copy Output button moves the result, to your clipboard.