Code-Beautifier Schritt fuer Schritt: JavaScript, CSS, HTML und JSON formatieren

Der kostenlose Code-Beautifier auf dieser Seite rueckt JavaScript, CSS und HTML wieder korrekt ein und gibt JSON lesbar aus - alles im Browser. Dieser Leitfaden erklaert, was Sie bei jedem Eingabetyp erwarten koennen, was zu tun ist, wenn das Ergebnis falsch aussieht, und wann ein anderes Werkzeug die bessere Wahl ist.

Last reviewed: 2026-07-02

freetoolonline.com Editorial Team

JavaScript formatieren

Fuegen Sie ein JavaScript-Schnipsel ein - eine minifizierte Zeile, eine kopierte Funktion oder eine ganze Datei - und klicken Sie auf Format. Das Tool laedt eine selbst gehostete Kopie der Open-Source-Bibliothek js-beautify und ruft deren JavaScript-Formatierer auf, der verschachtelte geschweifte und runde Klammern einrueckt und jede Anweisung auf eine eigene Zeile setzt. Das Einfuegen von function add(a,b){return a+b;} liefert dieselbe Funktion, verteilt auf mehrere Zeilen mit eingerueckter Rumpf-Anweisung innerhalb der geschweiften Klammern. Der Formatierer aendert nur die Formatierung - er benennt keine Variablen um, ordnet keine Anweisungen um und aendert nicht das Verhalten des Codes.

CSS formatieren

CSS wird erkannt, wenn die Eingabe wie ein oder mehrere Bloecke Selektor { Eigenschaft: Wert; } aussieht, ohne JavaScript-typische Tokens (kein function, kein =>, kein var, let oder const, keine runden Klammern). Das Einfuegen einer minifizierten Regel wie .card{margin:0;padding:8px;border-radius:4px} liefert die Regel mit jeder Eigenschaft auf einer eigenen eingerueckten Zeile innerhalb der geschweiften Klammern. Mischt ein CSS-Schnipsel ein JavaScript-aehnliches Token ein, kann der Detektor es faelschlich als JavaScript einordnen - fuegen Sie CSS allein ein, ohne umgebende Script-Tags, damit die Erkennung zuverlaessig bleibt.

HTML formatieren

Eine Eingabe, die mit < beginnt, wird als HTML behandelt. Ein einzeiliges Schnipsel wie <div><p>hi</p></div> kommt mit jedem Tag auf einer eigenen Zeile zurueck, wobei Kindelemente eine Ebene tiefer eingerueckt sind als ihr Elternelement. Das ist nuetzlich fuer HTML, das ueber den Browserbefehl "Copy outerHTML" kopiert wurde und meist als eine unlesbare Zeile ankommt. Der HTML-Formatierer haengt davon ab, dass die JavaScript- und CSS-Formatierer derselben Engine zuerst laden (fuer beliebige <script>- oder <style>-Bloecke im Markup), was das Tool automatisch vor der Ausfuehrung erledigt.

JSON formatieren

JSON wird vor allem oben genannten geprueft: Beginnt die Eingabe mit {, [, einem Anfuehrungszeichen, einer Ziffer oder einem von true, false, null, parst das Tool sie und gibt sie mit JSON.stringify(value, null, 2) wieder aus - zwei Leerzeichen Einzug, eine Eigenschaft pro Zeile. Das ist ein echtes Parsen, keine Text-basierte Vermutung, daher wird ein fehlerhaftes JSON erkannt: Das Einfuegen von {"a":1, (ein abschliessendes Komma ohne Fortsetzung) liefert eine Meldung, die mit Invalid JSON: beginnt, statt eines formatierten Ergebnisses. Beheben Sie den gemeldeten Fehler und fuegen Sie erneut ein.

Wenn das Ergebnis falsch aussieht

Zwei Dinge koennen schiefgehen. Erstens kann die Spracherkennung daneben liegen - sie ist eine Heuristik auf Basis der Textform, kein vollstaendiger Parser fuer jede Sprache, sodass eine Sprache, fuer die das Tool nicht gebaut wurde (Python, Java, Go und aehnliche), trotzdem durch den JavaScript-Formatierer laeuft und das Ergebnis moeglicherweise nicht korrekt aussieht. Zweitens bedeutet ein Parse-Fehler bei JSON konkret, dass das Tool nichts formatieren kann, bis das JSON gueltig ist - fuegen Sie erneut ein, nachdem Sie den gemeldeten Fehler behoben haben. In keinem der beiden Faelle wird Ihre Eingabe beschaedigt: Das linke Feld behaelt genau das, was Sie eingefuegt haben, sodass Sie es jederzeit erneut versuchen koennen.

Code-Beautifier vs JSON-Parser

Beide Tools koennen JSON lesbar ausgeben, daher hilft es zu wissen, wann welches Tool die richtige Wahl ist. Der Code-Beautifier ist die richtige Wahl fuer JavaScript, CSS oder HTML und gibt JSON als Nebeneffekt ebenfalls lesbar aus. Der JSON-Parser ist die richtige Wahl, wenn Sie gezielt ein JSON mit Fehlererkennung validieren, das Ergebnis als aufklappbaren Baum durchsuchen oder Typ und Array-Index eines bestimmten Felds pruefen muessen - er ist ausschliesslich fuer JSON gebaut und zeigt mehr von der Struktur als ein einfacher eingerueckter Ausdruck.

Schnellreferenz

Eingabe beginnt mit	Erkannt als	Verwendete Engine
{, [, einem Anfuehrungszeichen, einer Ziffer, oder true/false/null	JSON	JSON.stringify(value, null, 2)
<	HTML	html_beautify (js-beautify)
Regelbloecke, z. B. Selektor { Eigenschaft: Wert; }	CSS	css_beautify (js-beautify)
Alle anderen Faelle	JavaScript	js_beautify (js-beautify)

Datenschutz

Die Formatierung laeuft vollstaendig in diesem Browser-Tab. Eingefuegter Code wird niemals hochgeladen, an einen Analysedienst gesendet oder auf einem Server gespeichert - er existiert nur im Speicher der Seite, bis Sie den Tab schliessen oder etwas anderes einfuegen.

Verwandte Leitfaeden

• JSON-Parser: validieren vs formatieren vs Baumansicht - der analoge Entscheidungsleitfaden fuer das reine JSON-Werkzeug.
• CSS-Minifier vs Compressor - die umgekehrte Aufgabe: ein Stylesheet verkleinern statt es zu formatieren.
• Code-Formatierungs-Tool - das Tool selbst.
• Entwickler-Tools-Hub - die vollstaendige Sammlung, alle im Browser ohne Upload.

Haeufig gestellte Fragen

Aendert der Beautifier, was mein Code tut?

Nein. Es aendert sich nur die Formatierung und der Einzug. Logik, Werte und Struktur des eingefuegten JavaScript-, CSS- oder HTML-Codes bleiben gleich.

Warum wurde mein CSS als JavaScript formatiert?

Die Spracherkennung ist eine Heuristik auf Basis der Textform, kein vollstaendiger Parser. Enthaelt Ihr CSS-Schnipsel ein Token, das der Detektor mit JavaScript verknuepft, kann es als JavaScript eingeordnet werden. Fuegen Sie die CSS-Regel allein ein, damit die Erkennung zuverlaessig bleibt.

Kann ich Python, Java oder eine andere Sprache formatieren?

Nicht zuverlaessig. Das Tool erkennt JavaScript, CSS, HTML und JSON. Jede andere Sprache laeuft trotzdem durch den JavaScript-Formatierer, und das Ergebnis sieht moeglicherweise nicht korrekt aus - pruefen Sie das Ergebnis, bevor Sie sich darauf verlassen.

Wird mein Code irgendwohin hochgeladen?

Nein. Die Formatierung laeuft vollstaendig in diesem Browser-Tab; nichts, was Sie einfuegen, wird an einen Server oder Analysedienst gesendet.