Ein JSON Beautifier, der Ihr JSON nie zu sehen bekommt.

Ein JSON Beautifier liest ein Dokument, parst es zu einem Baum aus Objekten, Arrays, Strings, Zahlen, Wahrheitswerten und null, und schreibt diesen Baum mit einem Wert pro Zeile und gleichmäßiger Einrückung wieder heraus. Das wichtige Wort ist parst. Er fügt nicht mit einem regulären Ausdruck hinter jedem Komma einen Zeilenumbruch ein, wie es erstaunlich viele Schnipsel im Netz tun, und was jeden String still zerstört, der selbst ein Komma oder eine geschweifte Klammer enthält.

Das hat eine Folge, der man sofort begegnet: Ein Dokument, das kein gültiges JSON ist, lässt sich nicht verschönern. Es gibt keinen Baum zum Ausgeben. Deshalb sind Verschönern und Validieren hier dieselbe Operation und nicht zwei Knöpfe, und deshalb liefert ein ungültiger Einfügevorgang Zeile, Spalte und eine Beschreibung des Erwarteten statt eines leeren Ausgabefeldes.

Leerraum außerhalb von Strings trägt in JSON keine Bedeutung. RFC 8259 erlaubt zwischen zwei beliebigen Token Leerzeichen, Tabulator, Wagenrücklauf und Zeilenvorschub, also kann eine Neuformatierung nicht ändern, was ein Dokument bedeutet. Leerraum innerhalb eines Strings ist dagegen Nutzdaten und bleibt exakt so, wie er war. Ein Formatierer, der auf Text statt auf einem Syntaxbaum arbeitet, kann diese beiden Fälle nicht unterscheiden, und genau das ist der häufigste Weg, auf dem Formatieren Nutzdaten beschädigt.

Die Reihenfolge der Schlüssel bleibt erhalten. Die Spezifikation nennt Objekte ungeordnet, nichts darf sich also darauf verlassen, aber die Reihenfolge, in der Sie eingefügt haben, ist fast immer die, die ein Diff, ein Code Review oder ein lesender Mensch erwartet. Schlüssel umzusortieren macht jeden späteren Vergleich laut, ohne dafür irgendetwas zu gewinnen.

Fügen Sie links ein und drücken Sie Verschönern. Das formatierte Dokument erscheint rechts, fertig zum Kopieren oder Herunterladen. Es gibt kein Konto, keinen Upload-Schritt, kein Tageslimit und nirgends eine Bezahlschranke, und genau das meinen die meisten, wenn sie nach einem JSON Beautifier online kostenlos suchen und nicht nach der Testversion eines Desktop-Produkts.

Die Standardeinrückung sind zwei Leerzeichen, worauf sich die meisten Ökosysteme und die meisten Styleguides geeinigt haben. Vier Leerzeichen und Tabulatoren stehen ebenfalls bereit, falls Ihr Repository diese Entscheidung längst getroffen hat, und die Wahl wird lokal im Browser gemerkt statt auf einem Server, weil es keinen Server gibt, der sie sich merken könnte.

Alles läuft in einem Web Worker, die Oberfläche bleibt also bedienbar, während ein Dokument geparst wird. 100 KB werden in etwa 9 bis 13 ms formatiert, 1 MB in 70 bis 119 ms und 10 MB in rund 0,6 bis 0,8 Sekunden, gemessen auf einem Desktoprechner über zwei Durchläufe. Nehmen Sie das als Spanne und nicht als Benchmark, aber die Größenordnung ist der Punkt: 10 MB sind genug Arbeit, um einen Haupt-Thread vollständig einzufrieren, und hier läuft sie nicht auf einem.

Nach dem ersten Besuch liegt die Seite im Cache, dieser JSON Beautifier online arbeitet also auch ohne Netzverbindung weiter. Das ist kein Service-Worker-Trick. Es ist das natürliche Ergebnis einer statischen Seite, die ihre Arbeit lokal erledigt: Ohne Netz schlägt einfach der Analyse-Ping fehl, und jedes Werkzeug arbeitet weiter, weil keines von ihnen je einen Server gebraucht hat.

Die meisten Formatierer sind ein Textfeld und ein Knopf. Eingefügtes hinein, formatierter Text heraus, und wenn das Dokument kaputt war, sitzen Sie wieder im eigenen Editor und raten. Das Feld hier ist ein echter Code-Editor mit Syntaxhervorhebung, Klammernpaarung, Code-Faltung, inkrementeller Suche und Fehlermarkierungen direkt in der Zeile, Sie können das Eingefügte also reparieren und neu formatieren, ohne die Seite zu verlassen.

Faltung zählt mehr, als es klingt. Eine Konfigurationsdatei mit 4.000 Zeilen ist nicht dadurch lesbar, dass sie eingerückt ist. Lesbar wird sie dadurch, dass Sie jeden Zweig außer dem einen einklappen, der Sie interessiert, und das ist eine Eigenschaft des Editors, nicht des Formatierers.

Wenn Sie dasselbe Dokument lieber als aufklappbaren Baum statt als Text sehen wollen, stellt der JSON Viewer es so dar. Die Validierung meldet jedes Problem, statt beim ersten aufzuhören. Die Reparatur kümmert sich um Beinahe-JSON wie einfache Anführungszeichen, nachgestellte Kommata und Schlüssel ohne Anführungszeichen, und listet jede Änderung auf, damit Sie die ablehnen können, die Ermessensentscheidungen und keine Korrekturen waren.

Wer nach dem besten JSON Viewer und JSON Beautifier online sucht, fragt in der Regel nicht nach Einrückung, die jedes Werkzeug richtig hinbekommt. Gefragt wird nach den Dokumenten, an denen Werkzeuge scheitern: Ganzzahlen, die größer sind als JavaScript halten kann, doppelte Schlüssel und unsichtbare Zeichen, die aus einem Chat-Client oder einer Textverarbeitung mitkopiert wurden. Das wird hier behandelt, oben mit echter Ausgabe beschrieben, und es ist der einzige Teil, über den zu streiten sich lohnt.

Ein Browser-Tab ist nicht immer der Ort, an dem das passieren soll. Wenn die Datei ohnehin im Editor offen ist, ist der schnellste JSON Beautifier derjenige, der dort auf einer Taste liegt.

Notepad++ bringt keinen JSON-Formatierer mit. Die übliche Antwort ist das Plugin JSTool: Plugins öffnen, dann Plugins Admin, nach JSTool suchen, installieren, neu starten, und der Befehl erscheint unter Plugins, JSTool, JSFormat. Es funktioniert, und für alltägliche Nutzdaten ist es das richtige Werkzeug. Beachten Sie, dass JSTool Zahlen als 64-Bit-Gleitkommazahlen parst: Eine ID im Twitter- oder Snowflake-Stil oberhalb von 9007199254740991 kommt stillschweigend mit anderen Ziffern zurück, als sie hineingegangen ist.

Sublime Text nutzt das Paket Pretty JSON, über Package Control installiert und standardmäßig auf Strg+Alt+J gelegt. Es formatiert über Python, große Ganzzahlen überleben also exakt, ein echter Vorteil gegenüber den auf JavaScript beruhenden Varianten. Dafür verwirft es doppelte Schlüssel wortlos und behält den letzten.

VS Code braucht gar kein Plugin. Dokument formatieren, also Umschalt+Alt+F unter Windows und Linux und Umschalt+Option+F unter macOS, formatiert jede Datei, die der Editor als JSON erkennt. Zusätzlich gibt es in der Befehlspalette einen eigenen Befehl Format JSON.

Was keines dieser Werkzeuge liefert, ist eine Diagnose. Sie formatieren ein gültiges Dokument und verweigern ein ungültiges, was völlig in Ordnung ist, bis das Dokument ungültig und 40.000 Zeilen lang ist. Für diesen Fall ist diese Seite gebaut, und ebenso für einen Rechner, auf dem Sie keine Plugins installieren dürfen.

Eine JSON Beautifier Chrome Erweiterung tut etwas wirklich Nützliches: Sie fängt Antworten ab, die als application/json ausgeliefert werden, und stellt sie formatiert und aufklappbar in der Adressleiste dar, sodass eine API, an der Sie gerade arbeiten, ohne Umweg über einen Formatierer lesbar ist. Firefox macht das seit Version 44 von sich aus und braucht dafür überhaupt keine Erweiterung.

Den Preis sollte man lesen, bevor man eine installiert. Um die Seite jeder API umzuschreiben, die Sie besuchen, muss die Erweiterung die Berechtigung anfordern, Ihre Daten auf allen Websites zu lesen und zu ändern, die weitreichendste Berechtigung, die Chrome vergibt. Sie umfasst Ihre Bank, Ihre E-Mail und die Administrationskonsole Ihres Arbeitgebers, und sie bleibt über jedes stille Update bestehen, das die Erweiterung danach ausliefert. Eine JSON Beautifier Erweiterung von einem Betreuer, dem Sie aus gutem Grund vertrauen, ist vernünftig. Eine zu installieren, weil sie das oberste Suchergebnis war, ist es nicht.

Diese Seite braucht nichts davon. Sie arbeitet in Chrome, Firefox, Safari und Edge gleich, installiert nichts und hält keine Berechtigungen über andere Seiten, die Sie besuchen, denn eine Seite ist keine Erweiterung: Sie kann sich selbst lesen und sonst nichts. Einfügen ist ein Tastendruck mehr als bei einer abfangenden Erweiterung, und das ist der ganze Unterschied.

Dafür brauchen Sie keine Bibliothek. JSON.stringify nimmt ein drittes Argument, das die Einrückung steuert, und steckt in jeder JavaScript-Laufzeit: JSON.stringify(wert, null, 2) rückt mit zwei Leerzeichen ein, und ein String statt einer Zahl, wie in JSON.stringify(wert, null, "\t"), rückt mit Tabulatoren ein.

Beim Einsetzen des Ergebnisses in eine Seite geht ein HTML JSON Beautifier schief. Die Ausgabe muss in einem <pre>-Element stehen, sonst fällt jede Folge von Leerzeichen zusammen und die Formatierung ist wieder dahin, und sie muss maskiert werden, bevor sie als HTML eingesetzt wird. Sonst wird ein String-Wert, der </script> oder eine spitze Klammer enthält, dem Parser als Markup übergeben, und das ist eine Cross-Site-Scripting-Lücke mit Zwischenschritten.

In React ist diese Maskierung bereits erledigt. <pre>{JSON.stringify(daten, null, 2)}</pre> ist zu Debugzwecken der gesamte React JSON Beautifier, und weil React interpolierten Text standardmäßig maskiert, ist das auch mit nicht vertrauenswürdiger Eingabe sicher. Die Regel lautet schlicht, für die Ausgabe von JSON niemals zu dangerouslySetInnerHTML zu greifen, denn das ist die eine Art, diese Garantie zu verlieren.

Der Vorbehalt, der für all das gilt, ist die Zahlengenauigkeit. JSON.parse macht aus jeder Zahl einen Double, ein Bezeichner oberhalb von 2^53-1 ist also schon die falsche Zahl, bevor JSON.stringify ihn überhaupt sieht, und keine Formatierung holt die Ziffern zurück. Wenn Ihre Nutzdaten große IDs tragen, lesen Sie zuerst, was mit einer Ganzzahl oberhalb von 2^53-1 passiert. Der Beautifier auf dieser Seite gibt genau die Ziffern wieder aus, die Sie eingefügt haben, und deshalb stimmen seine Ausgabe und ein Umweg über JSON.parse nicht immer überein.