# Beautify

> JavaScript-, CSS- und HTML-Code im Browser formatieren, entpacken und deobfuskieren — der Einstieg zu Manual, Beispielen und Tipps zu Beautify.

Source: https://www.jpkc.com/db/tools/beautify/

## Minifizierter Code, wieder lesbar gemacht

[Beautify](https://www.jpkc.com/tools/beautify/) nimmt zusammengestauchten, in eine Zeile gepressten oder bewusst unleserlich gemachten Quelltext und gibt ihn sauber eingerückt und formatiert zurück. Du kennst die Situation: Eine `min.js` aus einem Build, ein CSS-Blob aus dem DevTools-Inspector oder ein HTML-Fragment ohne einen einzigen Zeilenumbruch — alles technisch korrekt, aber für Menschen kaum zu entziffern. Beautify dreht das um.

Du fügst den Code ins Editor-Feld ein, klickst auf **Beautify** (oder drückst Strg+Enter), und bekommst formatierten Code zurück — direkt im selben Editor, bereit zum Kopieren oder Herunterladen. Die Sprache erkennt das Tool automatisch; du kannst sie bei Bedarf aber auch fest auf JavaScript, CSS oder HTML stellen.

Gedacht ist Beautify für alle, die mit fremdem oder ausgeliefertem Code arbeiten: **Entwicklerinnen und Entwickler**, die eine Minified-Datei aus Produktion nachvollziehen wollen; **Frontend-Leute**, die kopiertes CSS oder HTML in eine einheitliche Form bringen; und alle, die einen Schnipsel aus einer Konsole, einem Bug-Report oder einer Bibliothek lesbar machen müssen, bevor sie damit weiterarbeiten.

## Was Beautify kann

Die Funktionen lassen sich in drei Gruppen fassen:

- **Formatieren** — JavaScript, CSS und HTML werden neu eingerückt und umgebrochen. Über die Optionen steuerst du Einrückung (Tabs oder 2 bis 8 Leerzeichen), erlaubte Leerzeilen, Zeilenumbruch-Länge, Klammer-Stil und elf Detail-Schalter wie „Comma-first", „Break chained methods" oder „Keep array indent".
- **Entpacken und deobfuskieren** — Mit der Option **Detect packers** erkennt das Tool gängige JavaScript-Packer und entpackt sie, bevor es formatiert: das klassische P.A.C.K.E.R.-Format (`eval(function(p,a,c,k,e,d)…`), URL-encodierten Code und MyObfuscate. Das geschieht musterbasiert — es ist keine KI im Spiel, sondern das Rückgängigmachen bekannter Pack-Verfahren.
- **Ein-/Ausgabe** — Datei per Knopfdruck hochladen (`.js`, `.css`, `.html`, `.json` und mehr), das Ergebnis in die Zwischenablage kopieren oder als Datei herunterladen. Der Editor (CodeMirror) bringt Syntax-Highlighting und Zeilennummern mit; bei Bedarf lässt sich auf ein schlichtes Textfeld umschalten.

JSON und JSONP werden über den JavaScript-Formatierer mitverarbeitet — gültiges JSON ist gültiges JavaScript, deshalb wird es sauber eingerückt. Eine eigene JSON-Validierung ist das nicht; dafür gibt es das JSON-Editor-Tool.

## Architektur und Datenschutz

Beautify läuft **vollständig in deinem Browser**. Der Code, den du einfügst oder hochlädst, wird nicht an einen Server gesendet — das Formatieren und Entpacken erledigen JavaScript-Bibliotheken (js-beautify und die Entpacker) lokal auf deinem Rechner. Auch der Datei-Upload liest die Datei nur lokal ein. Das macht das Tool unbedenklich für proprietären oder vertraulichen Code: Er verlässt deinen Browser nicht.

## Jetzt ausprobieren

**[→ Beautify öffnen](https://www.jpkc.com/tools/beautify/)** — Code einfügen, **Beautify** klicken (oder Strg+Enter), formatiertes Ergebnis kopieren. Ohne Account, kostenlos, direkt im Browser.

## Verwandte JPKCom-Tools

Beautify formatiert — diese Tools decken die angrenzenden Aufgaben ab:

- **[Compiler](https://www.jpkc.com/db/tools/compiler/)** — die Gegenrichtung: HTML, JavaScript und CSS minifizieren (und auch beautifyen), SASS/SCSS zu CSS kompilieren.
- **[Coder](https://www.jpkc.com/db/tools/coder/)** — HTML-Entities, URLs, Base64, JWT und Data-URIs en- und decodieren, bevor du den Klartext durch Beautify schickst.
- **[Source](https://www.jpkc.com/db/tools/source/)** — den Quelltext einer Seite abrufen, um ihn anschließend hier lesbar zu machen.

---

Tiefer geht es auf den Unterseiten: das **[Manual](https://www.jpkc.com/db/tools/beautify/manual/)** mit jeder Option im Detail, **[Beispiele](https://www.jpkc.com/db/tools/beautify/examples/)** aus der Praxis und gesammelte **[Tipps & Tricks](https://www.jpkc.com/db/tools/beautify/tips/)**.