🖊️

JS Beautifier

Format and pretty-print minified or compressed JavaScript with proper indentation and consistent spacing.

Input JavaScript
Formatted JavaScript

About JS Beautifier — JavaScript Beautifier Online

Paste compressed, minified, or poorly indented JavaScript into the JS Beautifier online and get back clean, readable code with proper indentation and consistent structure — no server involved — paste your code, choose an indentation style, and click Beautify. The formatted output appears instantly, ready to copy back into your editor.

Developers encounter minified JavaScript regularly: third-party libraries, bundled code, code received from clients, obfuscated scripts under review, or auto-generated code from frameworks. When you need to read, understand, debug, or modify that code, raw minified JavaScript is impractical. Beautifying it restores the visual structure — function blocks, conditionals, loops, and object literals all become readable with proper nesting and indentation — so you can navigate and understand the logic quickly.

How to Use the JS Beautifier

  1. Paste your JavaScript code — minified, compressed, or single-line — into the Input JavaScript text area on the left.
  2. Choose your preferred Indent style from the dropdown: 2 spaces, 4 spaces, or Tab. This controls how deeply nested blocks are indented.
  3. Click the Beautify JS button to run the formatter. The properly indented JavaScript appears in the right panel.
  4. Click the Copy button above the output panel to copy the formatted JavaScript to your clipboard.

Features of the JS Beautifier

The beautifier is designed to be reliable on real-world JavaScript including minified bundles, third-party libraries, and generated code.

  • Configurable indentation: Choose between 2-space indentation (standard for most JavaScript style guides and frameworks like React and Vue), 4-space indentation (common in enterprise codebases and older style guides), or tab indentation (preferred by some editors and enforced by tools like Prettier with the useTabs option).
  • String-literal aware: The formatter tokenizes the JavaScript before processing it, so content inside single quotes, double quotes, and backtick template literals is preserved exactly as-is. Characters like semicolons, commas, or braces that appear inside string values are never misinterpreted as code structure.
  • Comment preservation: Both single-line (//) and block (/* */) comments are preserved exactly in the output. Comment content is never modified, moved, or dropped.
  • Block and statement formatting: Opening braces and brackets trigger indentation of the enclosed block. Closing braces and brackets dedent correctly. Semicolons and commas produce line breaks so each statement and each property in an object or array starts on its own line.

Tips for Getting the Best Results

The beautifier works on any syntactically valid JavaScript, but a few tips help get the cleanest output.

  • Use it to read third-party libraries: When you want to understand how a library works or find a specific function, paste the minified library source and beautify it. The result won't have the original variable names (those are minified away) but the structure will be readable enough to follow the logic and find what you need.
  • Choose the indentation style that matches your codebase: If your project uses a linter like ESLint or a formatter like Prettier, pick the indentation style that matches your config. Copying beautified code that uses a different indent style than your project will cause linting errors or require reformatting.
  • Beautify before reading auto-generated code: Frameworks like Angular, Webpack, and Vite produce readable-ish bundles but with inconsistent formatting. Beautifying them first makes it much easier to search for specific functions or trace execution paths during debugging.
  • Combine with browser DevTools: For JavaScript running in a browser, Chrome and Firefox DevTools have a built-in "pretty print" button (the {} icon) in the Sources panel. Use this tool when you want a persistent copy of the formatted code to paste into a code editor, as DevTools formatting is read-only.
  • Clear both panels before pasting a new script: Click the Clear button to reset both text areas before starting on a new piece of code. This prevents accidental mix-ups between different scripts if you're formatting several files in sequence.

Why Use a JavaScript Beautifier Online

Most code editors have built-in formatting support via plugins like Prettier or ESLint, but those require a project setup. A browser-based beautifier is useful when you are working on a shared computer, reviewing code quickly without access to your usual editor, or dealing with a standalone script file that isn't part of a larger project. It also requires no Node.js or npm to be installed.

The tool is fully client-side, so your code is never transmitted anywhere. This is particularly important when reviewing proprietary codebases, client code under NDA, or internal scripts that shouldn't leave your organization's environment.

Frequently Asked Questions about JS Beautifier

No. If the JavaScript was minified with variable renaming (by tools like Terser, UglifyJS, or esbuild), the short variable names like a, b, c, or _0x1234 cannot be recovered. Variable name deduction requires access to source maps. This tool only restores whitespace structure and indentation — it does not reverse any name transformations applied during minification.
No. All formatting runs entirely in your browser. Your JavaScript code is never transmitted to Oneyfy's servers or any third party. The beautifier processes your input in browser memory and outputs the result locally. This makes it safe to use with confidential source code, proprietary scripts, or code covered by an NDA.
Yes, completely free with no account required. There are no usage limits, no subscription plans, and no paywalls. You can beautify as many JavaScript files as you need at no cost, for personal or commercial use.
Prettier is a full-featured opinionated code formatter that parses JavaScript into an AST and reprints it according to strict style rules, handling operator spacing, quote style, trailing commas, and more. This tool is a simpler indentation-focused beautifier that works by tokenizing the code and re-indenting based on brackets and braces. Prettier produces more consistent output for complex code; this tool is faster for quick, no-install formatting tasks.
The tool is designed for standard JavaScript. TypeScript-specific syntax like type annotations, interface declarations, and generics, as well as JSX angle-bracket syntax, may not format correctly since the formatter does not fully parse those language extensions. For TypeScript and JSX files, use a dedicated formatter like Prettier with the appropriate parser configured.
Yes. The layout is responsive and works in mobile browsers on Android and iOS. The text areas are scrollable on small screens. Pasting large amounts of JavaScript is easiest with a physical keyboard, but the beautifier functions correctly on touch devices as well.