# Beautify — Beispiele > Praxisnahe Durchläufe mit Beautify: minifiziertes JS, CSS und HTML formatieren, gepackten Code entpacken, Dateien laden und Optionen feinjustieren. Source: https://www.jpkc.com/db/tools/beautify/examples/ Zurück zur Übersicht: [Beautify](https://www.jpkc.com/db/tools/beautify/) · Tool live öffnen: [www.jpkc.com/tools/beautify/](https://www.jpkc.com/tools/beautify/) Das [Manual](https://www.jpkc.com/db/tools/beautify/manual/) erklärt jede Option im Detail. Diese Seite ergänzt das um **konkrete Arbeitsabläufe**: typische Aufgaben, Schritt für Schritt durchgespielt. Die Oberfläche des Tools ist auf Englisch — Options- und Button-Namen stehen deshalb in ihrer englischen Original-Schreibweise, bei Bedarf mit deutscher Erläuterung. Alle Zahlenwerte unten sind Beispiele, keine Vorgaben. ## Beispiel 1: Eine minifizierte JS-Datei lesbar machen Der Klassiker — du hast eine `min.js`-Zeile aus dem Build und willst sehen, was sie tut. 1. Öffne [Beautify](https://www.jpkc.com/tools/beautify/) und füge den minifizierten Code in den Editor ein. Lass das Sprach-Dropdown auf **Auto-detect** — der Code beginnt nicht mit `<` und passt nicht auf CSS-Muster, also erkennt das Tool ihn als **JavaScript**. 2. Drück **Strg+Enter** (oder klick **Beautify**). Die eine lange Zeile wird in eingerückte Blöcke aufgefächert, Klammern und Anweisungen stehen wieder lesbar untereinander. 3. Stört dich die Einrückung mit Leerzeichen, stell **Indentation** auf **Tab character** oder z. B. **2 spaces** — das Tool formatiert nach der Änderung **automatisch neu**. 4. Übernimm das Ergebnis mit **Copy** in die Zwischenablage. Damit hast du aus einem unlesbaren Einzeiler wieder navigierbaren Code gemacht — ideal, um eine Stelle in der Produktion zu verstehen oder einen Bug-Report nachzuvollziehen. ## Beispiel 2: CSS aus dem DevTools-Inspector entwirren Du hast computed/komprimiertes CSS kopiert und willst es in eine saubere, versionierbare Form bringen. 1. Füge das CSS ein. Beginnt es mit einer At-Regel (`@media`, `@font-face` …) oder einem Selektor mit `{`, erkennt **Auto-detect** es als **CSS**. Im Zweifel das Dropdown manuell auf **CSS** stellen. 2. Wähl die gewünschte **Indentation** (z. B. **2 spaces** für ein typisches Frontend-Projekt) und klick **Beautify**. 3. Setz **Newlines** auf **Allow 1**, wenn zwischen Regelblöcken genau eine Leerzeile stehen soll — oder auf **Remove all extra**, wenn du es maximal kompakt magst. 4. Lad das Ergebnis per **Download** als `beautified.css` herunter. Das Resultat ist konsistent eingerücktes CSS, das sich sauber in ein Stylesheet einfügt und in der Versionskontrolle lesbare Diffs erzeugt. ## Beispiel 3: Verschachteltes HTML einrücken Ein HTML-Block ohne Umbrüche — etwa aus einem CMS-Export — soll wieder eine erkennbare Struktur bekommen. 1. Füge das HTML ein. Da es mit `<` beginnt, erkennt **Auto-detect** es als **HTML**. 2. Klick **Beautify**. Tags werden ihrer Verschachtelung entsprechend eingerückt. 3. Für tiefe Dokumente aktivier **Indent head/body**, damit auch die Inhalte von `` und `` eine Ebene mehr bekommen. 4. Enthält das HTML `