JSON Visualisierer
Visualisieren Sie JSON-Daten als interaktiven Baum. Formatieren, minimieren und analysieren Sie Ihr JSON mit Statistiken.
Ein JSON-Visualisierer liest ein JSON-Dokument ein und zeichnet es als eingerückten, farbcodierten Baum statt als Textwand. Fügen Sie es in das Feld Input JSON ein: Der rechte Bereich liest 300 ms nach dem letzten Tastendruck neu ein, Zeichenketten grün, Zahlen blau, Wahrheitswerte gelb und null grau, jedes Array und Objekt mit seiner Elementzahl beschriftet. Acht Zähler darunter melden Schlüssel, Zeichenketten, Zahlen, Wahrheitswerte, Nullwerte, Arrays, Objekte und die maximale Verschachtelungstiefe.
JSON Visualisierer
Der JSON Visualisierer ermöglicht es Ihnen, JSON-Daten in einer interaktiven Baumansicht einzufügen, zu formatieren und zu erkunden.
Beliebte Werkzeuge
Über JSON Visualisierer
Alles geschieht in der Seite. Ihr JSON geht an das eingebaute JSON.parse des Browsers, Sie sehen also genau das, was eine JavaScript-Laufzeit akzeptieren würde – ohne Serverweg, ohne Upload und ohne Größengrenze außer dem Speicher des Tabs. Das Einlesen ist um 300 Millisekunden verzögert, damit der Baum dem Tippen folgt, ohne bei jedem Anschlag neu gebaut zu werden.
Der rechte Bereich hat zwei Modi. Tree zeichnet jeden Schlüssel in Violett, gefolgt vom Wert in der Farbe seines Typs; Arrays erscheinen als [n], Objekte als {n}, sodass die Form einer Nutzlast sichtbar wird, bevor man etwas davon liest. Raw zeigt dieselben eingelesenen Daten neu serialisiert mit zwei Leerzeichen Einrückung, nützlich zum Kopieren einer normalisierten Fassung statt zum Erkunden. Die Beschriftung über dem Bereich nennt zudem die Größe des Inhalts im Eingabefeld, unter 1 KB in Bytes, darüber in Kilobytes.
Die Werkzeugleiste bietet Format, das die Eingabe mit zwei Leerzeichen Einrückung neu schreibt, Minify, das jedes Leerzeichen und jeden Zeilenumbruch entfernt, und Copy, das die zweifach eingerückte Fassung in die Zwischenablage legt. Vier Beispielschaltflächen – Simple Object, Nested Data, Array of Objects und API Response – ersetzen die Eingabe durch ein kleines Beispiel und sind der schnellste Weg, die Zähler zu verstehen. Achtung: Format, Minify und Copy tun gar nichts, solange die Eingabe ungültig ist.
Scheitert das Einlesen, färbt sich das Eingabefeld rot und die genaue Meldung von JSON.parse steht darunter, samt Position des Problems. Mehr Diagnose gibt es nicht: Dies ist ein Betrachter und ein Formatierer, kein Prüfer gegen ein JSON Schema, kein JSONPath-Werkzeug und kein Editor – Zweige lassen sich nicht einklappen, der Baum nicht durchsuchen und Werte rechts nicht ändern. Erwartet wird striktes JSON: nachgestellte Kommata, einfache Anführungszeichen, Kommentare und Schlüssel ohne Anführungszeichen werden abgelehnt.
Anwendungsfälle
Anleitung
Fügen Sie Ihr JSON links in das Feld Input JSON ein oder drücken Sie eine der Beispielschaltflächen: Simple Object, Nested Data, Array of Objects oder API Response.
Beobachten Sie den rechten Bereich: Er liest etwa 300 ms nach dem letzten Tastendruck neu ein und zeichnet einen farbcodierten Baum, in dem Zeichenketten, Zahlen, Wahrheitswerte und Nullwerte je eine eigene Farbe haben.
Färbt sich das Eingabefeld rot, lesen Sie die Fehlerzeile darunter; sie wiederholt die Meldung des browsereigenen JSON-Parsers und nennt die Position des Problems.
Drücken Sie Format, um die Eingabe mit zwei Leerzeichen neu einzurücken, oder Minify, um alles auf eine Zeile ohne Leerzeichen zu bringen.
Wechseln Sie zwischen den Schaltflächen Tree und Raw, um den Baum gegen formatierten Text zu tauschen, und lesen Sie darunter die Zähler für Schlüssel, Zeichenketten, Zahlen, Arrays, Objekte und Tiefe.
Drücken Sie Copy in der Werkzeugleiste, um das mit zwei Leerzeichen eingerückte JSON in die Zwischenablage zu legen.
Profi-Tipps
- Format, Minify und Copy bleiben bei ungültigem JSON stillschweigend wirkungslos, weil jede Aktion mit einem eigenen JSON.parse in einem try-Block beginnt. Wirkt eine Schaltfläche tot, schauen Sie zuerst auf die rote Fehlerzeile unter der Eingabe.
- Der Zähler Depth beginnt bei 0 für einen Skalar und zählt je Verschachtelungsstufe eins hoch, ein flaches Objekt zeigt also 1. Das ist der schnellste Weg, eine Nutzlast zu erkennen, die einen rekursiven Durchlauf statt einer einfachen Schleife braucht.
- Die neben Tree View oder Formatted angezeigte Größe misst den Inhalt des Eingabefelds, nicht die eingelesenen Daten. Drücken Sie Minify, und sie fällt sofort – ein schneller Weg zu sehen, wie viel einer Nutzlast bloß Leerraum ist.
- Keys zählt jeden Schlüssel in jedem Objekt, auch wiederholte Namen in einem Array von Objekten: Ein Array aus drei dreischlüsseligen Objekten meldet 9 Schlüssel und 1 Array, nicht 3.
- Laden Sie Array of Objects, um zu sehen, wie der Baum Sammlungen kennzeichnet: Die Wurzel zeigt [3] und jedes Element {3}, die Zahlen in Klammern verraten die Form also ohne jedes Aufklappen.
Fehlerbehebung
Die Schaltflächen Format, Minify und Copy tun beim Klick nichts.
Alle drei lesen die Eingabe zuerst ein und verschlucken den Fehler, wenn das misslingt; ein ungültiges Dokument macht sie also stumm. Sehen Sie auf das Eingabefeld: Bei rotem Rand steht darunter eine Fehlermeldung mit der zu korrigierenden Position.
Der Baum aktualisiert sich beim Tippen nicht sofort.
Das Einlesen ist um 300 Millisekunden verzögert, damit der Baum nicht bei jedem Anschlag neu gebaut wird. Halten Sie kurz inne, dann zieht er nach; geschieht das nicht, ist das Dokument ungültig und der rechte Bereich behält den letzten gültigen Stand.
Eine Konfigurationsdatei, die mein Editor akzeptiert, wird hier abgelehnt.
Editoren akzeptieren oft JSON with Comments oder JSON5 mit Kommentaren, nachgestellten Kommata und Schlüsseln ohne Anführungszeichen. Diese Seite nutzt das strikte JSON.parse. Entfernen Sie Kommentare und das nachgestellte Komma und setzen Sie doppelte Anführungszeichen um jeden Schlüssel.
Die Seite reagiert nach dem Einfügen einer großen Nutzlast kurz nicht.
Einlesen, Baumdarstellung und der Statistikdurchlauf laufen alle im Haupt-Thread, ein Dokument von mehreren Megabyte blockiert die Oberfläche also, solange es arbeitet. Warten Sie ab oder fügen Sie einen repräsentativen Ausschnitt statt des ganzen Exports ein.
Häufig gestellte Fragen
Ein Lesewerkzeug für JSON: Es liest den Text ein und zeigt die Struktur als eingerückten Baum statt als eine lange Zeile. Fügen Sie Ihr JSON links in das Feld Input JSON ein, und der Baum erscheint rechts etwa eine Drittelsekunde später. Mehr ist nicht nötig – keine Start-Schaltfläche, kein Konto, kein Datei-Upload.
Ja, er läuft im Browser-Tab, ohne Installation und ohne Anmeldung. Das Einlesen, der Baum, die Statistik und die Aktionen Format, Minify und Copy sind JavaScript auf Ihrem eigenen Rechner, dahinter steckt also kein API-Schlüssel, kein Kontingent und keine Kosten pro Anfrage.
Nein. Das Dokument geht an das eingebaute JSON.parse Ihres Browsers und wird lokal dargestellt; keine Anfrage trägt die Eingabe aus der Seite. Damit taugt es für API-Antworten mit Tokens oder personenbezogenen Daten, wobei wirklich Geheimes vor jedem Browserwerkzeug besser geschwärzt wird.
Es gibt keine feste Grenze, nur das, was der Tab fasst. Ein Dokument von mehreren Megabyte einzulesen und neu zu zeichnen lässt die Oberfläche sichtbar stocken, weil es im Haupt-Thread geschieht. Minifizieren Sie bei solchen Größen eine Stichprobe oder teilen Sie die Nutzlast in die Teile, die Sie wirklich prüfen wollen.
Nein. Der rechte Bereich bietet eine Tree- und eine Raw-Ansicht des formatierten Texts; es gibt keinen Tabellenmodus, keine Spaltenauswahl und keinen CSV-Export. Bei einem Array von Datensätzen markiert der Baum das Array als [n] und jeden Datensatz als {n}, was Zeilen- und Feldzahl auch ohne Tabelle liefert.
Weil JSON.parse striktes JSON verlangt. Nachgestellte Kommata nach dem letzten Element, einfache statt doppelter Anführungszeichen, Schlüssel ohne Anführungszeichen, Kommentare sowie NaN oder Infinity werden abgelehnt, auch wenn JavaScript-Objektliterale manches davon erlauben. Die rote Zeile nennt die Position, meist ein Zeichen hinter dem eigentlichen Fehler.
Format liest die Eingabe neu ein und schreibt sie mit zwei Leerzeichen Einrückung und einem Wert je Zeile zurück – so will man es zum Lesen oder für ein Repository. Minify schreibt dieselben Daten ganz ohne Leerzeichen und Zeilenumbrüche – so will man es für eine Nutzlast, die gleich verschickt wird. Beide ersetzen den Inhalt des Eingabefelds.
Drücken Sie Copy in der Werkzeugleiste. Der Knopf liest den Inhalt des Eingabefelds ein und schreibt die mit zwei Leerzeichen eingerückte Fassung in die Zwischenablage; Sie bekommen also die aufgeräumte Form, selbst wenn im Feld gerade eine minifizierte Zeile steht. Zwei Sekunden lang steht dort Copied; passiert nichts, ist die Eingabe kein gültiges JSON.
Als Erweiterung nicht – dies ist eine Webseite, kein Editor-Plugin. Einmal geladen arbeitet es weiter, weil Einlesen und Darstellen lokal geschehen; eine abbrechende Verbindung stoppt Sie mitten in der Sitzung also nicht. Den Tab neu zu öffnen setzt allerdings voraus, dass die Seite geladen werden kann.
Keys ist jeder Objektschlüssel im Dokument; Strings, Numbers, Booleans und Nulls zählen Werte des jeweiligen Typs; Arrays und Objects zählen Container; Depth ist die tiefste erreichte Verschachtelungsstufe. Zusammen beschreiben sie die Form einer Nutzlast in einer Zeile – praktisch, um eine unerwartet tiefe oder unerwartet leere Antwort zu erkennen.