JSON hier einfügen, um es anzuzeigenJSON einfügen

Was ist der JSON-Viewer?

Rohes JSON ist super für Maschinen und furchtbar für die Augen. Fünf Ebenen geschweifte Klammern, Kommas am Zeilenende, eine ewig lange Zeile — Sie kennen das. Der JSON-Viewer macht daraus etwas, das Sie tatsächlich durchstöbern können: Jedes Array wird zu einer Zeile, jedes Objekt zu einer Gruppe von Spalten, und verschachtelte Strukturen werden zu Tabellen in Tabellen, in die Sie hineinzoomen können.

Gebaut für den Moment, in dem Sie die Daten einfach SEHEN wollen. Nicht parsen, nicht validieren, nicht konvertieren — sehen. Werfen Sie eine Fetch-Antwort, einen GraphQL-Payload, eine Logzeile rein, was auch immer. Der Viewer legt alles so aus, dass Sie auf einen Blick erkennen, ob die API das zurückgegeben hat, was Sie erwartet haben, und ob die Form zu dem passt, was Ihr Code will.

Alles läuft im Browser — kein Upload, kein Konto, keine Obergrenze, wie oft Sie an einem Nachmittag einfügen und anschauen wollen.

So zeigen Sie JSON hier an

Drei Schritte zu einer strukturierten Sicht auf Ihre Daten. Die Schaltflächen unter dem Editor entsprechen genau dem, was Sie hier lesen.

Einfügen oder Beispiel laden

Kopieren Sie JSON aus Ihrem API-Client (Postman, Insomnia, Netzwerk-Tab der Browser-DevTools) und fügen Sie es links ein. Wenn Sie den Viewer erst in Aktion sehen wollen, klicken Sie auf Beispiel, um einen kleinen Datensatz zu laden.

{"order": {"id": "ORD-4821", "customer": {"name": "Priya Shah", "tier": "gold"}, "items": [{"sku": "SKU-101", "qty": 2}, {"sku": "SKU-204", "qty": 1}], "total": 189.50}}

Ist Ihr JSON fehlerhaft, sehen Sie direkt unter dem Editor eine Meldung, die auf die Stelle zeigt, an der der Parser aufgegeben hat.

Struktur durchstöbern

Die rechte Seite wird sofort neu gezeichnet, sobald sich die Eingabe ändert. Arrays aus Objekten erscheinen als Zeilen mit einer Spalte pro Schlüssel. Verschachtelte Objekte und Arrays werden zu eigenen Mini-Tabellen in der Zelle, damit Sie einer Kette wie order.customer.tier visuell folgen können. Nutzen Sie Haupt oder Verschachtelt, um die Ausrichtung zu drehen, wenn ein Datensatz mehr Schlüssel als Zeilen hat — manchmal liest es sich einfacher mit Schlüsseln als Zeilen und Werten als Spalten. Das Layout folgt den JSON-Typen aus RFC 8259.

Eingrenzen, was Sie sich anschauen

Jede Spalte hat ein Filterfeld. Tippen Sie gold in die tier-Spalte, SKU-1 in eine SKU-Spalte, pending in eine Status-Spalte — Zeilen, die nicht passen, werden ausgeblendet. Filter ignorieren Groß-/Kleinschreibung und stapeln sich (tier=gold UND status=paid). Stört eine Spalte die Sicht, klicken Sie auf Bearbeiten und dann auf das Entfernen-Symbol (×) im Kopf, um sie herauszunehmen.

Vollbild für breite Daten

Für Datensätze mit 20+ Spalten klicken Sie auf Vollbild. Die Tabelle dehnt sich auf das gesamte Ansichtsfenster aus, damit Sie horizontal scrollen können, ohne dass das Seitenpanel im Weg ist. Super zum Debuggen einer fetten GraphQL-Query oder eines denormalisierten Reports.

Teilen oder exportieren, wenn Sie fertig sind

Etwas gefunden, das Ihnen aufgefallen ist? Klicken Sie auf Teilen, um einen Kurzlink (1 Stunde, 1 Tag oder 1 Woche) zu erzeugen und einem Teamkollegen zu schicken — er öffnet dieselbe Ansicht, dasselbe JSON, ohne erneutes Einfügen. Oder klicken Sie auf Excel, um die Tabelle als .xls herunterzuladen für Excel, Google Tabellen oder LibreOffice. Das Parsen passiert clientseitig über JSON.parse().

Wann der Viewer sich auszahlt

API-Antworten im Auge behalten

Sie rufen einen Endpoint in Postman auf, kriegen 8 KB JSON zurück und müssen wissen, ob ein verschachteltes shipping.address.country-Feld gefüllt ist. Antwort hier einfügen und Sie haben die Antwort in zwei Sekunden. Kein Parsen im Kopf nötig.

Log-Streams lesen

Strukturierte Logs aus <a href="https://www.elastic.co/de/elasticsearch" target="_blank" rel="noopener">Elasticsearch</a>, CloudWatch oder einem beliebigen JSON-Line-Logger landen als einzeilige Blöcke. Einen hier hineinwerfen und Sie sehen Zeitstempel, Dienst, Level, Nachricht und Trace-ID sauber ausgelegt — praktisch, wenn Sie um 2 Uhr morgens einen zickigen Dienst im tail mitlesen.

Schema-Beispiele prüfen

Schauen Sie sich Beispiel-Payloads in einer <a href="https://swagger.io/specification/" target="_blank" rel="noopener">Swagger/OpenAPI</a>-Spezifikation oder im README des Teams an? Beispielblock einfügen und Feld für Feld durch die Form gehen. Schneller als eingerücktes JSON von oben bis unten zu lesen, und Sie erkennen optionale oder fehlende Felder sofort.

Daten für Stakeholder zeigen

Ihr PM will wissen, was die Checkout-API zurückgibt, aber "hier ist ein JSON-Blob" zieht nicht. Kurzlink erzeugen, in Slack einfügen, und er sieht eine ordentliche Tabelle — ohne Erklärung, was Klammern und Doppelpunkte bedeuten.

Häufige Fragen

Was ist der Unterschied zwischen einem JSON-Viewer und einem JSON-Parser?

Sie überschneiden sich stark, aber der Blickwinkel ist anders. Ein Parser konzentriert sich auf den Akt, JSON-Text in eine nutzbare Struktur zu verwandeln (und fehlerhafte Syntax zu melden). Ein Viewer konzentriert sich auf die Ausgabe — wie das geparste Ergebnis dargestellt wird, damit Sie es lesen können. Dieses Tool macht beides unter der Haube, aber die Oberfläche ist darauf getrimmt, große oder tief verschachtelte Daten zu durchstöbern, nicht bloß zu validieren.

Verlassen meine Daten den Browser?

Nein. Parsing und Rendering passieren lokal mit JavaScript. Daten gehen nur dann raus, wenn Sie auf "Teilen" klicken, um einen Kurzlink zu erstellen, und selbst dann bestimmen Sie die Ablaufzeit (1 Stunde bis 1 Woche). Schauen Sie sich etwas Sensibles an, teilen Sie einfach nicht — Tab schließen und weg.

Wie tief darf die Verschachtelung gehen?

Keine feste Obergrenze. Der Viewer rendert verschachtelte Arrays und Objekte rekursiv bis in jede Tiefe. Tiefe Strukturen werden irgendwann visuell unübersichtlich — ab fünf oder sechs Ebenen lohnt es sich, mit der Filterzeile auf den Zweig zu zielen, der Sie wirklich interessiert, oder die verschachtelte Ausrichtung per Verschachtelt-Button zu drehen.

Kann ich auch Arrays von Primitivwerten sehen, nicht nur von Objekten?

Ja. Ein Array wie ["read", "write", "admin"] wird als einspaltige Liste gerendert. Gemischte Arrays (Objekte + Primitivwerte) funktionieren ebenfalls — jedes Element bekommt eine eigene Zeile, und der Viewer ermittelt die Spaltenmenge aus allen Schlüsseln, die in den Objekten vorkommen.

Warum sind einige Spalten weg, nachdem ich das JSON aktualisiert habe?

Haben Sie vorher Spalten entfernt (über das ×-Symbol im Bearbeitungsmodus), merkt sich der Viewer das für die aktuelle Sitzung und blendet die zugrunde liegenden Schlüssel auch aus dem JSON aus. Neues JSON einfügen startet die Erkennung neu. Fehlt eine erwartete Spalte, prüfen Sie, ob der Bearbeitungsmodus sie fallen gelassen hat oder ob der Schlüssel tatsächlich in jedem Datensatz existiert.

Wie groß darf eine JSON-Datei bequem sein?

Dateien bis zu ein paar MB rendern flott. Jenseits von 5 MB merken Sie, dass der Browser arbeitet. Jenseits von 10 MB wird es zäh, aber der Viewer schafft es noch — wenn Sie regelmäßig mit 50 MB+ zu tun haben, schneiden Sie zuerst mit einem CLI-Tool wie jq oder gron und fügen dann nur den relevanten Ausschnitt hier ein.