# Beautify — Examples > Hands-on Beautify walkthroughs: format minified JS, CSS, and HTML, unpack packed code, load files, and fine-tune the options. Source: https://www.jpkc.com/db/en/tools/beautify/examples/ Back to the overview: [Beautify](https://www.jpkc.com/db/en/tools/beautify/) · Open the tool live: [www.jpkc.com/tools/beautify/](https://www.jpkc.com/tools/beautify/) The [manual](https://www.jpkc.com/db/en/tools/beautify/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](https://www.jpkc.com/tools/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 `` and `` get an extra level too. 4. If the HTML contains `