Beautify — Examples

Back to the overview: Beautify · Open the tool live: www.jpkc.com/tools/beautify/

The manual explains every option in detail. This page adds concrete workflows: typical tasks, played through step by step. The tool's interface is in English, so option and button names are simply the real ones. All numbers below are examples, not requirements.

Example 1: Make a minified JS file readable

The classic — you've got a min.js line from a build and want to see what it does.

1. Open Beautify and paste the minified code into the editor. Leave the language dropdown on Auto-detect — code like !function(e){…} or var a=… starts neither with < nor with a CSS selector and declaration block, so the tool detects it as JavaScript.
2. Press Ctrl+Enter (or click Beautify). The single long line fans out into indented blocks; braces and statements line up readably again — by default with 4-space indentation and if ( with a space.
3. If the indentation doesn't match your project, set Indentation to Tab character or, say, 2 spaces — the tool reformats automatically after the change and remembers your choice for next time.
4. Take the result with Copy to the clipboard.

Want a quick look at the original line? Press Ctrl+Z: the unformatted code is back, and Ctrl+Enter formats it again.

You've turned an unreadable one-liner back into navigable code — ideal for understanding a spot in production or following a bug report.

Example 2: Untangle CSS from the DevTools inspector

You've copied computed/compressed CSS and want it in a clean, version-controllable shape.

1. Paste the CSS. If it starts with an at-rule (@media, @font-face, @layer …) or with a selector and declaration block (.btn{color:red}), Auto-detect recognizes it as CSS. When in doubt, set the dropdown to CSS manually and then click Beautify — choosing a language doesn't reformat on its own.
2. Choose your Indentation (e.g. 2 spaces for a typical frontend project); the tool reformats right away.
3. Set Newlines to Allow 1 if no blank lines should survive inside a rule (the default, Allow 2, keeps at most one). Remove all extra has the same effect in CSS; the blank line between two rules is added in either case.
4. Download the result via Download (or Ctrl+S) as beautified.css.

The result is consistently indented CSS that drops cleanly into a stylesheet and produces readable diffs in version control.

Example 3: Indent nested HTML

A break-free HTML block — say, from a CMS export — should get a recognizable structure again.

1. Paste the HTML. Since it starts with <, Auto-detect recognizes it as HTML.
2. Click Beautify. Tags are indented according to their nesting.
3. For full documents, enable Indent head/body so the contents of <head> and <body> get an extra level too, then click Beautify again — checkboxes don't reformat on their own.
4. If the HTML contains <script> blocks, control their indentation via HTML Scripts — for instance Add one level so the script content clearly belongs to its surrounding tag. Being a dropdown, this option takes effect immediately.

An HTML clump becomes a tree whose hierarchy you grasp at a glance.

Example 4: Unpack packed JavaScript

You've run into code in the eval(function(p,a,c,k,e,d)…) format (P.A.C.K.E.R.) and want to see what's behind it.

1. Paste the packed code and keep the language on JavaScript (Auto-detect is enough: eval( counts as a call and therefore as JavaScript).
2. Check Detect packers in the Options card — it's off by default.
3. Click Beautify. The tool recognizes the packing format, unpacks it (recursively, if packed more than once), and then formats the result. A header comment in front of the packed block stays on top. Nothing gets executed along the way: the unpacker only decodes the symbol table, so you can safely examine code from a suspicious source.
4. If escaped strings remain in the unpacked code (e.g. \x68\x69), also enable Unescape strings and reformat — the strings then become readable.

A note on expectations: this works for the two known, reversible schemes P.A.C.K.E.R. and URL encoding. Code obfuscated with symbol renaming or control-flow scrambling is only formatted, not turned back into the original source.

Example 5: Load a file, format, download

If the code already exists as a file, you save the copy-paste step.

1. Click Upload in the toolbar and pick the file (e.g. a .js, .css, or .html).
2. Beautify reads the file locally, sets the language from the file extension, and formats automatically — you don't need to click Beautify separately. A .json, .jsx, or .ts file runs as JavaScript, an .htm file as HTML. For .jsx/.tsx, turn on Support e4x/jsx first, or the automatic formatting tears the JSX apart.
3. Check the result in the editor, adjust the options if needed (every dropdown change reformats; after ticking a checkbox, click Beautify once).
4. Click Download or press Ctrl+S — the file is named after the language (beautified.js / .css / .html); you give it the original filename yourself when saving.

After the upload, the language stays fixed on the detected one until you reload. If you change an option after the upload, as in step 3, the tool stores the language along with it, and it stays fixed after a reload too. If you paste code in a different language afterward, set the dropdown back to Auto-detect (or use Clear, which resets the language as well).

The whole process stays in your browser; the file is never uploaded.

Example 6: Fine-tune the options deliberately

You don't just want to format code, you want to align it to a particular style standard.

1. Paste the code and format once with Beautify — using the defaults (4 spaces, Newlines set to Allow 2, no wrapping, brace on the statement line).
2. Set indentation: Indentation → Tab character or the desired number of spaces.
3. Choose a brace style: Brace Style → On own line if opening braces should go on their own line; With control statement if they belong at the statement's end. If blocks that are already on one line should stay inline, combine this with Preserve inline braces — blocks with a single statement and object literals then stay entirely on one line, while several statements are still split across lines.
4. Tame line length: Line Wrap → e.g. 80 chars so long lines get wrapped — inside inline blocks too.
5. Set style toggles: such as Break chained methods for long method chains, or Comma-first style if your project places commas at the start of the line. Press Ctrl+Enter once after each checkbox.

Because the tool reformats automatically after every dropdown change, you see the effect of those options immediately — so you home in on exactly the style you need in a few clicks. The tool stores all settings in the browser: on your next visit, your house style is already in place.

Example 7: Make a JSON or JSONP response readable

You've copied an API response from the DevTools network tab — a single line of JSON, perhaps wrapped in a JSONP callback.

1. Paste the response, for example:

   {"user":{"id":42,"roles":["admin","dev"]},"active":true}

2. Leave the language on Auto-detect. If the text starts with { or [ and is valid JSON, the tool hands it to the JavaScript formatter. A JSONP response such as callback({…}) is recognized as JavaScript by its function call, too.

3. Press Ctrl+Enter. Objects fan out with each key on its own line; short arrays stay on one line:

   {
       "user": {
           "id": 42,
           "roles": ["admin", "dev"]
       },
       "active": true
   }

4. If you only need part of it, select it in the editor and copy it with Ctrl+C — Copy always takes the whole content.

Beautify only formats the JSON. If it's invalid (with a trailing comma, say), the JavaScript formatter formats it anyway without warning you. To check, repair, or reshape it, use the JSON Editor.

---

Go deeper: the overview for the big picture, the manual for every option, and the tips & tricks for strategy and pitfalls. You can try it all directly in the tool.