JSON formatieren, validieren und minifizieren, ohne raten zu muessen, wo der Fehler liegt
Du hast eine API-Response gepastet und sie ist eine lange Zeile ohne Einrueckung. Oder du hast eine Config mit hunderten Keys und weisst nicht mal, ob sie gueltig ist. Oder du willst JSON in einem Payload verschicken und dir ist wichtig, dass es so klein wie moeglich bleibt.
Das Tool macht drei Sachen: formatieren (lesbare 2/4-Spaces- oder Tab-Einrueckung), minifizieren (kein Whitespace, kleinstmoegliche Groesse) und validieren (gruener "Valid JSON"-Badge oder roter Fehler mit der exakten Zeile und Spalte).
Alles laeuft im Browser, nichts wird irgendwohin geschickt. Geparst wird mit der nativen JavaScript-Engine (gleiche wie in Node.js und Chrome), die Validierung matcht also exakt das, was dein Backend akzeptiert. Plus Stats: Verschachtelungstiefe, Anzahl Keys, Typ-Verteilung (Strings, Numbers, Booleans, Null). Praktisch fuer Debugging, Code-Reviews und das Verstehen fremder Payloads.
So nutzt du das Tool
- Modus waehlen oben: Format (lesbar mit Einrueckung), Minify (kompakt, eine Zeile) oder Validate (prueft nur Korrektheit, zeigt Stats).
- JSON pasten ins linke Panel. Eine realistische API-Response (Shop-Bestellung) ist per Default geladen, damit du sofort siehst, was passiert. Ueberschreib es oder druck "Clear".
- Im Format-Modus waehl die Einrueckung: 2 Spaces (Web-Standard), 4 Spaces (leichter lesbar bei tiefen Strukturen) oder Tab (wenn dein Projekt das nutzt).
- Aktivier Sort keys (alphabetisch innerhalb jedes Objekts), um zwei Payloads leichter zu diffen. Arrays behalten ihre Reihenfolge.
- Im Minify-Modus siehst du auch Groesse vorher und nachher plus Prozent gespart. Typische Ersparnis bei sauber formatiertem JSON: 30-50%.
- Ist das JSON ungueltig, zeigt das rechte Panel eine rote Box mit der Fehlermeldung plus exakte Zeile, Spalte und Zeichenposition. Die ueblichen Verdaechtigen: fehlendes Komma, Trailing Comma, nicht-geschlossener String.
- Stats unten: Tiefe (tiefste Verschachtelung), Anzahl Keys, Anzahl Werte, Typ-Verteilung. Hilft, Payloads zu erkennen, die "zu breit" oder "zu tief" fuer deine DB sind.
- Kopieren im rechten Panel uebertraegt das Ergebnis. Alles passiert lokal, keine Daten verlassen den Browser.
Wann das nuetzlich ist
Sechs typische Situationen, in denen das Tool Handarbeit spart:
- Eine API-Response debuggen. Du hast eine lange Zeile aus einem Fetch-Call. Pasten, mit 2-Space-Einrueckung formatieren, Struktur in 3 Sekunden sehen, und das Feld entdecken, das null statt eines Objekts ist, genau die Bug-Ursache.
- Config vor dem Deploy pruefen. Deine package.json, tsconfig.json oder CI-Workflow muss gueltiges JSON sein, sonst bricht der Build. Pasten, validieren, du siehst das Trailing Comma nach dem letzten Array-Item in Zeile 47, der klassische 20-Minuten-Bug.
- Zwei Payload-Versionen vergleichen. Du hast Responses aus zwei Umgebungen (Staging vs. Production) und willst wissen, was sich unterscheidet. Sort keys an fuer beide, in dein Diff-Tool pasten, du siehst die echten Unterschiede in 5 Sekunden, ohne "Feld umsortiert"-Laerm.
- Payload-Groesse optimieren. Du schickst JSON ueber WebSocket oder HTTP und es zaehlt, wie schwer es ist. Minify: du siehst 2,4 KB faellt auf 1,2 KB, 50% weniger Daten auf der Leitung. Mal 10.000 Tagesrequests sind das echte Einsparungen.
- Fremdes JSON im Code-Review. Ein Kollege hat eine unformatierte Config in einen PR gepastet. Pasten, formatieren, du siehst die Struktur. Plus Stats: Tiefe 7, 340 Keys, Warnsignal, Payload zu breit, in mehrere Dateien splitten.
- Neue API lernen. Du hast eine Beispiel-Response von einem Vendor (Stripe, GitHub, Slack), pasten, formatieren, Struktur verstehen in 30 Sekunden, statt durch die Doku zu kriechen. Du siehst auch, wie viele Felder optional sind (Nulls) und wie verschachtelt es ist.