Code-Formatierer 🔒 Läuft lokal in Ihrem Browser — nichts wird hochgeladen.

HTML, CSS und JavaScript verschönern oder minifizieren.

Über dieses Tool

Code kommt minifiziert aus einem Bundle oder unordentlich aus einem schnellen Einfügen — und Sie brauchen das Gegenteil. Dieser Formatierer kann beides: verschönern, um HTML, CSS oder JavaScript zu entfalten und einzurücken, damit es lesbar wird, oder minifizieren, um es fürs Ausliefern zu verschlanken. Die JavaScript-Minifizierung übernimmt Terser, die von CSS übernimmt CSSO — dieselben bewährten Werkzeuge wie in echten Build-Pipelines.

Alles läuft lokal im Browser, sodass selbst proprietärer Code auf Ihrem Rechner bleibt. Wählen Sie die Sprache, wählen Sie Verschönern oder Minifizieren und kopieren Sie das Ergebnis.

Häufige Fragen

Was ist der Unterschied zwischen „Beautify“ und „Minify“?

Beautify fügt Einrückungen und Zeilenumbrüche hinzu, damit der Code gut lesbar ist; Minify entfernt Leerzeichen und Kommentare und kürzt Namen, damit die Datei für die Produktion so klein wie möglich wird. Verwenden Sie Beautify während der Entwicklung und Minify vor dem Deployment.

Verändert die Minifizierung das Verhalten meines Codes?

Eigentlich nicht — Minifizierer schreiben nur Syntax um, deren Äquivalenz beweisbar ist (lokale Variablen umbenennen, toten Code entfernen usw.). Verhält sich der minifizierte Code anders, deutet das meist auf Code hin, der sich auf whitespace-abhängige Eigenheiten verlassen hat, oder auf einen echten Fehler, den der Parser des Minifizierers gefunden hat.

Wird mein Code irgendwohin hochgeladen?

Nein. Formatierung und Minifizierung laufen vollständig in Ihrem Browser mit JavaScript-Bibliotheken (js-beautify, Terser, csso), die einmal geladen und dann lokal ausgeführt werden. Ihr Code verlässt diese Seite nie.

Welche Sprachen unterstützt dieser Formatter?

JavaScript, CSS und HTML. Die JS-Minifizierung nutzt Terser, die CSS-Minifizierung csso, und die HTML-Minifizierung ist ein schlanker eigener Durchlauf, der den Inhalt von <pre>-, <script>- und <style>-Tags erhält.

Warum habe ich einen Syntaxfehler statt formatierter Ausgabe erhalten?

Der Formatter parst Ihren Code, bevor er ihn formatiert oder minifiziert. Ein echter Syntaxfehler (eine nicht geschlossene Klammer, ein überzähliges Komma) wird daher mit Zeilennummer gemeldet, statt stillschweigend eine defekte Ausgabe zu erzeugen.