JavaScript Formatter
Beautify and minify JavaScript online, free and private.
Paste messy, minified or one-line JavaScript and turn it into clean, readable code in one click, or minify it for production. Choose 2 spaces, 4 spaces or tabs, set line wrapping and brace style, then copy or download the result. Beautifying uses js-beautify and minifying uses Terser, both running right in your browser, so your code is never uploaded. The tool is free, with no sign-up and no usage limits.
No Sign-Up, No Usage Limits
Two Modes, One Click
Code Never Leaves Your Browser
Indent, Wrap & Brace Options
Tip: press Ctrl + Enter inside the input box to beautify. You can also drop a file onto the input.
Private by design: your code is formatted in your browser and never uploaded. Protected by Cloudflare Turnstile.
How Do You Format JavaScript Online?
To format JavaScript online, paste your code into the JavaScript input box or upload a .js file, choose your indentation and brace style under Settings, and click Beautify JavaScript. Clean, indented code appears in the Result box, ready to copy or download. To make the file smaller instead, click Minify JavaScript.
Minified bundles, copied snippets and code written in a hurry are hard to read and even harder to debug. A JavaScript formatter, also called a JS beautifier or pretty printer, rebuilds the layout of your code with consistent indentation, line breaks and spacing without changing what the code does. A JavaScript minifier does the opposite: it removes whitespace and comments and can shorten names so the file downloads and runs faster.
Everything happens on your own device. js-beautify rebuilds the indentation and line breaks of your code, and Terser compresses it when you minify. Your code is not sent to Teasoft or anyone else, so you can safely format private projects, client work and code that contains internal URLs or keys.
What changes when you beautify or minify:
| Part of your code | Beautify | Minify |
|---|---|---|
| Indentation and line breaks | Rebuilt with 2 spaces, 4 spaces or tabs | Removed, code is packed onto as few lines as possible |
| Blank lines | Kept (up to 2 in a row) when Keep existing blank lines is on | Removed |
| Comments | Kept where they are | Removed when Remove comments is on |
| Variable and function names | Unchanged | Shortened when Shorten names is on |
| What the code does | Unchanged | Unchanged, only the size and layout change |
Common reasons to format JavaScript
- Reading minified code from a website, library or bundle to understand how it works.
- Debugging a script when the browser console points to line 1 of a minified file.
- Cleaning up code before a code review, pull request or commit.
- Making snippets copied from docs, forums or AI assistants match your project style.
- Shrinking a script before adding it to a web page so it loads faster.
- Fixing mixed tabs, spaces and broken indentation in old or inherited code.
What each control does:
| Control | What it does | When to use it |
|---|---|---|
| JavaScript input box | Holds the code you want to format | Paste or type code, drop a file onto it, or click Upload. Accepts .js, .mjs, .cjs and .txt files up to 10 MB. |
| Paste, Sample and Clear | Paste from your clipboard, load example code, or empty the box | Use Sample to test the settings before you paste your own code. |
| Indentation | Sets 2 spaces, 4 spaces or a tab for each level | Match your project style guide or .editorconfig file. |
| End with a new line | Adds a final line break to the output | Keep it on for files you commit to Git. |
| Keep existing blank lines | Keeps up to 2 blank lines between blocks | Turn it off for compact output. |
| Line wrapping | Wraps long lines at 80, 100 or 120 characters | Use 80 or 100 for code reviews and side-by-side diffs. |
| Braces | Same line, own line, own line before else / catch, or keep as written | Pick the style your team uses. |
| Space after function | Writes function () instead of function() | Match your linter rules. |
| Shorten names and Remove comments | Control how aggressive minifying is | Turn off Remove comments to keep license headers. |
| Copy, Download and Use as input | Copy or save the result, or send it back to the input | Use as input lets you run it again with new settings. |
Good to know
- Formatting does not fix errors. If your code has a syntax error, beautify may give odd results and minify will stop with a message. Fix the error first, then format.
- Minifying is not protection. Minified code is smaller, not secret. Anyone can beautify it again, so never rely on it to hide API keys or passwords.
- Test after shortening names. Code that depends on function or class names at runtime can behave differently once names are shortened.
- Plain JavaScript works best. TypeScript, JSX and Vue or Svelte templates are not supported by the minifier. Use the JSON Formatter for JSON data.
- Size limits. Files can be up to 10 MB, and pasted code up to 5 million characters.
What You Can Do With This Tool
- Format JavaScript for free. No software to install and no account needed.
- Beautify minified code and make it readable again.
- Minify JavaScript to cut file size for production.
- Pick your indentation: 2 spaces, 4 spaces or tabs.
- Wrap long lines at 80, 100 or 120 characters.
- Choose a brace style or keep braces as written.
- Keep or remove comments when you minify.
- Shorten variable names for even smaller files.
- Upload .js, .mjs and .cjs files up to 10 MB.
- Copy or download the result in one click.
- See the savings in size and line count.
- Keep your code private. Nothing is uploaded.
Which Code Formatter Should I Use?
Use the JavaScript Formatter for scripts and .js files. For other code on your site, these free formatters work the same way:
How to Format JavaScript (3 Steps)
Add your JavaScript
Paste your code into the JavaScript input box, drop a .js file onto it, or click Upload. Click Sample to try the tool with example code.
Choose indentation, wrapping and braces
Open Settings and pick 2 spaces, 4 spaces or tabs, a line width and a brace style. For minifying, choose whether to shorten names and remove comments.
Beautify or minify, then save
Click Beautify JavaScript or Minify JavaScript. Copy the result or click Download to save it as a file.
Tip: press Ctrl + Enter inside the input box to beautify without clicking the button. To try different settings on the result, click Use as input. Cleaning up a whole page? Format the markup with the HTML Formatter and the styles with the CSS Formatter.
Beautify or Minify: Which Should I Use?
| Task | Use | Why |
|---|---|---|
| Read or debug a minified script | Beautify | Restores line breaks and indentation so you can follow the logic and find errors. |
| Prepare code for a review or commit | Beautify | Consistent formatting makes diffs smaller and reviews faster. |
| Learn from someone else’s code | Beautify | Unminified code is much easier to study line by line. |
| Add a script to a live website | Minify | Smaller files download faster and help page speed scores. |
| Inline a script in HTML or a bookmarklet | Minify | Packs the code into a short, compact block. |
| Share a snippet in docs or a blog post | Beautify with 2 spaces | Short indentation keeps lines readable on narrow screens. |
| Ship code with a license header | Minify with Remove comments off | Keeps required notices while still shrinking the file. |
Getting better results when you format JavaScript
- Format complete code. Paste whole functions or files. Fragments with unclosed braces or brackets format badly.
- Match your project style. Use the same indentation and brace style as your editor or Prettier config to avoid noisy diffs.
- Keep your source file. Edit the readable version and minify a copy for production. Never edit minified code directly.
- Wrap for reviews. A line width of 80 or 100 characters makes code easier to read in pull requests.
- Test the minified file. Run your tests or reload the page after minifying, especially with Shorten names turned on.
After you format your JavaScript
- Check that it runs. Reload your page or run your tests to confirm everything still works.
- Check your data. Use the JSON Formatter to validate JSON your script reads or sends.
- Tidy the rest of the page. Use the CSS Formatter and HTML Formatter so all your front-end code follows one style.
- Lint for bugs. A formatter fixes layout, not logic. Use a linter such as ESLint to catch mistakes.
Frequently Asked Questions
How do I format JavaScript online?
Paste your code into the JavaScript input box or upload a .js file, choose your settings, and click Beautify JavaScript. The formatted code appears in the Result box, where you can copy it or download it as a file.
Is this JavaScript formatter free?
Yes. It is completely free, with no sign-up, no usage limits and nothing added to your code.
Is my code uploaded to a server?
No. Your JavaScript is formatted and minified inside your browser. It is never sent to Teasoft or any other server, so it is safe to use with private or client code.
What is the difference between beautifying and minifying JavaScript?
Beautifying adds indentation, line breaks and spacing so code is easy to read. Minifying removes them, along with comments, to make the file as small as possible for production. Both keep the code working the same way.
Can I unminify or de-minify JavaScript?
Yes. Paste the minified code and click Beautify JavaScript to restore readable indentation and line breaks. Variable names that were shortened during minifying cannot be restored, because the original names are no longer in the file.
Will formatting change how my code works?
No. Beautifying only changes whitespace and layout. Minifying also rewrites some expressions into shorter forms, but the result behaves the same. Always test minified code before you publish it.
Should I use 2 spaces, 4 spaces or tabs?
Use whatever your project already uses. 2 spaces is the most common choice in JavaScript and is used by many popular style guides, 4 spaces is easier to scan, and tabs let each developer set their own width.
What do the brace style options mean?
Same line keeps the opening brace on the same line as if, function or for. Own line moves every opening brace to a new line. Own line before else / catch keeps braces on the same line but puts else, catch and finally on their own lines. Keep as written leaves your braces where they are.
What does Shorten names when minifying do?
It renames local variables and function parameters to short names like a, b and c to save space. Global names and object properties stay the same. Turn it off if you need readable names in the minified output.
Are comments kept when I minify?
Comments are removed when Remove comments when minifying is on. Turn it off to keep important comments, such as license headers. Beautifying always keeps your comments.
How much smaller will my JavaScript get?
It depends on the code. Well-commented, nicely indented scripts often shrink by 30 to 60 percent. The tool shows the exact size and percentage saved after each run.
What is the maximum file size?
You can upload files up to 10 MB or paste up to 5 million characters of code.
Which file types can I upload?
You can upload .js, .mjs, .cjs and .txt files, or drop them straight onto the input box.
Does it support ES6 and modern JavaScript?
Yes. It handles modern syntax such as let and const, arrow functions, classes, template literals, async and await, optional chaining and ES modules.
Can I format TypeScript, JSX or JSON?
The tool is built for plain JavaScript. Simple TypeScript or JSX may beautify, but the minifier does not support them. For JSON, use the Teasoft JSON Formatter, which also validates your data.
Why does it say the script couldn’t be minified?
This usually means the code has a syntax error, such as a missing bracket, or uses syntax that is not plain JavaScript. Fix the error or remove TypeScript and JSX syntax, then try again.
Why does the tool run a security check?
A quick Cloudflare Turnstile check helps stop automated bots from abusing the tool. It does not read your code, and your code still stays in your browser.
Does it work on mobile?
Yes. It works in current versions of Chrome, Edge, Firefox and Safari on desktop, Android and iPhone.
About Teasoft’s JavaScript Formatter
Teasoft’s JavaScript Formatter is a free online tool that beautifies and minifies JavaScript in your browser. It uses the open-source js-beautify library to rebuild indentation and line breaks, and Terser, a widely used JavaScript minifier, to compress code for production.
It is made for web developers, students, WordPress and SEO professionals, and anyone who needs to read, review or ship JavaScript without installing an editor extension or command-line tool.
Your code is processed on your own device and is never sent to Teasoft’s servers. There is no account, no usage limit and nothing added to your output.