Entwickler 🔒 Läuft im Browser — keine Daten werden gesendet

Code Formatter & Minifier

HTML, CSS, JavaScript und SQL verschönern oder minifizieren, die Sprache wird automatisch erkannt — alles in Ihrem Browser.

Eingabe
Ausgabe

Code Formatter - HTML, CSS, JavaScript und SQL formatieren oder minifizieren

Fügen Sie Code ein, der als eine einzige Zeile angekommen ist, oder Code, der bereit für die Auslieferung ist, und machen Sie daraus, was Sie gerade brauchen: sauber eingerückt und lesbar oder minifiziert auf möglichst wenige Bytes. Der Formatter beherrscht HTML, CSS, JavaScript und SQL, erkennt selbst, was Sie eingefügt haben, und erledigt alles im Browser. Quellcode, Abfragen mit Tabellennamen und Ausschnitte aus Kundenprojekten verlassen Ihr Gerät also nie.

Formatieren ist für Menschen: einen Pull Request prüfen, ein minifiziertes Bundle lesen, eine Abfrage debuggen, die jemand als eine lange Zeile geschrieben hat. Minifizieren ist für Maschinen: Kleinere Dateien laden schneller und kosten weniger Bandbreite. Ein Werkzeug deckt beide Richtungen ab.

So funktioniert es

  1. Fügen Sie Ihren Code ein. Sprache steht auf Automatisch erkennen; wählen Sie HTML, CSS, JavaScript oder SQL, falls die Erkennung danebenliegt.
  2. Klicken Sie auf Formatieren, um den Code einzurücken, oder auf Minifizieren, um ihn zu komprimieren.
  3. Stellen Sie die Einrückung auf 2 Leerzeichen, 4 Leerzeichen oder Tabulator und wählen Sie bei SQL den SQL-Dialekt und die Schreibweise der Schlüsselwörter.
  4. Klicken Sie auf Kopieren oder Herunterladen. Die Zeile unter dem Werkzeug zeigt die Größe vorher und nachher sowie die Ersparnis durch das Minifizieren.

Was für welche Sprache zum Einsatz kommt

SpracheFormatierenMinifizieren
HTMLjs-beautify: verschachtelte Tags eingerückt, Inline-Tags bleiben in ihrer ZeileKommentare und Leerraum zwischen Blockelementen entfernt; pre, textarea, script und style bleiben unangetastet
CSSjs-beautify: eine Deklaration pro ZeileKommentare und Leerraum entfernt, Strings erhalten, Leerzeichen bleiben dort, wo Werte sie brauchen, etwa bei 0 auto und calc(100% - 32px)
JavaScriptjs-beautify: geschweifte Klammern, Blöcke und verkettete Aufrufe eingerücktTerser: parst den Code, entfernt Ballast und kürzt lokale Variablennamen
SQLsql-formatter: Klauseln in eigenen Zeilen, dialektabhängigKommentare entfernt und Leerraum außerhalb von Anführungszeichen zu einzelnen Leerzeichen zusammengefasst

Die drei Bibliotheken sind Open Source und werden erst geladen, wenn Sie ihre Sprache zum ersten Mal verwenden. Die Seite selbst bleibt dadurch schlank.

SQL formatieren

Eine lange Abfrage in einer einzigen Zeile lässt sich kaum prüfen. Der SQL-Formatter setzt SELECT, FROM, WHERE, GROUP BY und jedes JOIN in eine eigene Zeile und rückt die Spalten und Bedingungen darunter ein. Der Dialekt spielt eine Rolle, weil sich Datenbanken bei der Syntax uneinig sind: Namen in Backticks sind MySQL, eckige Klammern sind SQL Server, ::-Casts sind PostgreSQL. Wählen Sie Ihren Dialekt aus Standard-SQL, MySQL, MariaDB, PostgreSQL, SQLite, SQL Server, Oracle PL/SQL, BigQuery und Snowflake. Schlüsselwörter lassen sich in GROSSBUCHSTABEN, kleinbuchstaben oder Wie geschrieben ausgeben; die Namen Ihrer Tabellen und Spalten werden nie verändert.

Sicher minifizieren

Minifizierter Code muss sich exakt wie das Original verhalten, und der sichere Weg dorthin ist, den Code zu verstehen, statt blind Zeichen zu löschen. JavaScript wird deshalb mit Terser minifiziert, das ihn zuerst in einen Syntaxbaum parst; enthält der Code einen Syntaxfehler, erhalten Sie Zeile und Spalte statt einer kaputten Ausgabe. Der CSS-Minifier behält die Leerzeichen, die eine Bedeutung tragen, und der HTML-Minifier lässt ein Leerzeichen zwischen Inline-Elementen wie <span>a</span> <span>b</span> stehen, weil sonst zwei Wörter auf der Seite zusammenkleben würden.

Minifizieren ersetzt keine Komprimierung auf dem Server. Gzip oder Brotli verkleinern Textdateien zusätzlich zur Minifizierung meist um 70 % oder mehr, und beides ergänzt sich gut.

Typische Einsatzzwecke

  • Eine minifizierte Datei lesen, etwa aus einer Fremdbibliothek oder einem Produktions-Bundle, während Sie debuggen.
  • HTML aufräumen, das ein E-Mail-Builder oder ein CMS exportiert hat, bevor Sie es von Hand bearbeiten.
  • Eine Abfrage prüfen, die aus einem Log, einer ORM-Debug-Zeile oder einer Chatnachricht aus dem Team stammt.
  • Einen Schnipsel verkleinern, CSS oder JavaScript, bevor Sie ihn inline in eine Seite oder eine E-Mail-Vorlage einbetten.

Verwandte Tools

Für JSON prüft und formatiert der JSON Formatter Ihre Daten, und der JSON-Konverter wandelt sie in YAML, CSV oder XML um. Um genau zu sehen, was das Formatieren geändert hat, fügen Sie Vorher und Nachher in den Textvergleich ein. Für eine einzelne Aufgabe öffnen die Aufgabenseiten dieses Werkzeug direkt passend eingestellt: HTML Formatter, SQL Formatter, CSS Minifier, JavaScript Minifier und JavaScript Beautifier.