JSON ist überall. Es roh zu lesen ist mühsam.
Jeder Entwickler kennt das: Du rufst einen Endpoint ab, eine Wand aus JSON flutet das Terminal, und du suchst ein verschachteltes Feld sechs Ebenen tief. Oder du öffnest eine package.json, die jemand geändert hat, und versuchst den Unterschied mit bloßem Auge zu finden. Rohes JSON ist maschinenfreundlich. Menschliche Augen sind das nicht.
Genau dieses Problem löst der JSON-Formatter Online von FileCrank — ohne Installation, ohne Anmeldung, läuft vollständig im Browser.
Was du damit machen kannst
Einfügen und sofort erkunden
Füge beliebiges JSON in das Eingabefeld ein. Das Tool rendert sofort einen erweiterbaren, farbkodierten Baum:
- Zeichenketten in Grün
- Zahlen in Blau
- Booleans in Lila
- Null-Werte in Grau
Klappe das data-Array ein, um dich auf den meta-Block zu konzentrieren. Erweitere nur das Objekt, das dich interessiert. Das allein spart Minuten beim Navigieren einer großen API-Antwort.
JSONC-Unterstützung — Kommentare inklusive
Arbeitest du mit Konfigurationsdateien? Viele reale Configs — VS Code-Einstellungen, TypeScript-Konfigurationen — verwenden JSONC: JSON mit Kommentaren. Das Standard-JSON.parse bricht bei // und /* */ ab. Dieser JSON Viewer kostenlos verfügbar baut die Kommentare vor dem Parsen automatisch ab, sodass du deine Config so einfügen kannst, wie sie ist.
Im Browser bearbeiten
Du brauchst keinen Texteditor zu öffnen, um einen falschen Wert zu korrigieren. Klicke auf einen beliebigen Wert im Baum, um ihn direkt zu bearbeiten. Das Tool erkennt den Typ automatisch: Tippe true und es wird ein Boolean, tippe 42 und es wird eine Zahl. Doppelklicke auf einen Schlüsselnamen, um ihn umzubenennen.
Beispiel: Du erhältst ein Webhook-Payload, wo "active": "true" eine Zeichenkette statt ein Boolean ist. Klicke auf den Wert, tippe true ohne Anführungszeichen, drücke Enter. Erledigt.
Knoten hinzufügen und entfernen
Neuen Schlüssel hinzufügen? Drücke + neben einem Objekt oder Array. Einen entfernen? Drücke × auf dem Knoten. Der Baum aktualisiert sich sofort.
Live-Panel für generierten JSON
Während du bearbeitest, aktualisiert sich das Panel "Generiertes JSON" in Echtzeit und zeigt den vollständigen geänderten JSON — bereit zum Kopieren. Es gibt keinen separaten "Anwenden"-Schritt — was du im Baum siehst, ist was du in der Ausgabe bekommst.
Kopieren, zurücksetzen, Änderungen verfolgen
Ein Klick auf "Kopieren" überträgt das gesamte JSON in die Zwischenablage. "Zurücksetzen" stellt alles auf das ursprüngliche Eingefügte zurück. Ein bernsteinfarbenes Geändert-Abzeichen erscheint, sobald deine Arbeitskopie von der Eingabe abweicht.
Ein praktisches Beispiel
Angenommen, du debuggst eine REST-API-Antwort:
- Kopiere den Response-Body aus dem Netzwerk-Tab oder deinem API-Client
- Füge ihn in den JSON Viewer ein
- Klappe das
results-Array ein — 200 Einträge, dich interessiert nur der Umschlag - Du siehst, dass
pagination.totalden Wert"500"(Zeichenkette) statt500(Zahl) hat - Klicke auf den Wert, tippe
500, drücke Enter - Kopiere den korrigierten JSON aus dem Ausgabe-Panel
- Füge ihn in dein Test-Fixture oder deinen Bug-Report ein
Gesamtzeit: unter 30 Sekunden. Kein lokales Tool nötig.
Jetzt ausprobieren
Öffne den JSON-Formatter Online, füge eine API-Antwort ein, die du schon immer untersuchen wolltest, und sieh selbst, wie viel schneller der Baum dir hilft, die Struktur zu verstehen — verglichen mit dem Starren auf minimierten JSON.
Wenn du mit strukturierten Daten über JSON hinaus arbeitest, schau dir JSON zu CSV, CSV zu JSON oder Base64 kodieren & dekodieren an.