So nutzen Sie es

Vier Schritte: einfügen, ausführen, prüfen, kopieren. Alles bleibt im Browser.

Eingabe einfügen

CSS, HTML, JSON oder anderen Text einfügen. Nichts wird hochgeladen.

Tool ausführen

Auf Konvertieren oder Ausführen klicken. Das Ergebnis erscheint sofort.

Ausgabe prüfen

Generierten Code und Hinweise prüfen, bevor Sie ihn übernehmen.

Kopieren und nutzen

Ausgabe kopieren und in Ihr Projekt einfügen.

Über dieses Tool

Der Beautifier gehört zur gleichen Familie wie der Formatierer: einheitliche Klammern und Abstände, damit Selektoren beim Lesen sofort auffallen. Er ersetzt kein Formatierungswerkzeug in der CI.

Beispiel

Als Beispiel dient eine absichtlich dicht geschriebene Navigation.

Eingabe

nav{display:flex;gap:1rem}nav a{color:#0f172a;text-decoration:none}nav a:hover{color:#0284c7}

Ausgabe

nav {
  display: flex;
  gap: 1rem;
}

Tipp

Streiten zwei Formatierer in der CI, entscheide dich für einen und nutze dieses Werkzeug nur für Zwischenstände.