JPKCom DB

Beautify — Examples

Hands-on Beautify walkthroughs: format minified JS, CSS, and HTML, unpack packed code, load files, and fine-tune the options.

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 — the code doesn't start with < and doesn't match CSS patterns, 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.
  3. If space-based indentation bothers you, set Indentation to Tab character or, say, 2 spaces — the tool reformats automatically after the change.
  4. Take the result with Copy to the clipboard.

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 …) or a selector with {, Auto-detect recognizes it as CSS. When in doubt, set the dropdown to CSS manually.
  2. Choose your Indentation (e.g. 2 spaces for a typical frontend project) and click Beautify.
  3. Set Newlines to Allow 1 if you want exactly one blank line between rule blocks — or Remove all extra if you prefer it maximally compact.
  4. Download the result via Download 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 deep documents, enable Indent head/body so the contents of <head> and <body> get an extra level too.
  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.

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 usually suffices).
  2. Check Detect packers in the Options card.
  3. Click Beautify. The tool recognizes the packing format, unpacks it (recursively, if packed more than once), and then formats the result.
  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 known, reversible packers (P.A.C.K.E.R., URL-encoded, MyObfuscate). 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.
  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 — the file is saved with a matching name (beautified.js / .css / .html).

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.
  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. For short blocks that should stay inline, combine this with Preserve inline braces.
  4. Tame line length: Line Wrap → e.g. 80 chars so long lines get wrapped.
  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.

Because the tool reformats automatically after every dropdown change, you see the effect of each option immediately — so you home in on exactly the style you need in a few clicks.

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.