JSON Editor — Manual

Zurück zur Übersicht: JSON Editor · Tool live öffnen: www.jpkc.com/tools/json/

Dieses Manual beschreibt den JSON Editor vollständig: die drei Ansichten, das Datei-Menü und jeden Knopf der Werkzeugleiste, die Reparatur, die Prüfung gegen ein JSON Schema, das Laden von einer URL, das Transform-Werkzeug und die Browser-Speicherung. Die Oberfläche des Tools ist auf Englisch — die Button- und Ansichts-Namen werden hier deshalb in ihrer englischen Original-Schreibweise genannt (mit deutscher Erläuterung), damit du dich im echten Interface zurechtfindest.

Unter der Haube arbeitet die quelloffene Bibliothek vanilla-jsoneditor von Jos de Jong (öffnet in neuem Tab) (englisch); die Code-Ansicht basiert auf CodeMirror 6. Dazu kommen lossless-json (öffnet in neuem Tab) als Parser, jsonrepair (öffnet in neuem Tab) für die Reparatur und @cfworker/json-schema (öffnet in neuem Tab) für die Schema-Prüfung (alle englisch). Das Tool läuft im Browser — einzige Ausnahme ist das Laden von einer URL, das über einen Proxy der Website geht.

Aufbau der Oberfläche

Im Kopf der Editor-Karte stehen der Titel JSON Editor, ein Badge für den Speicherstatus (anfangs Local storage, siehe Speicherung) und — nur solange ein Schema aktiv ist — ein gelbes Badge Schema. Rechts daneben sitzt die Werkzeugleiste: das Dropdown File, die Gruppe Format/Compact/Repair/Sort keys, der Button Schema und ganz rechts Fullscreen. Auf schmalen Bildschirmen zeigen die Buttons nur ihr Icon, die Leiste bricht bei Bedarf in eine zweite Zeile um.

Darunter liegt der eigentliche Editor mit seiner eigenen Menüleiste (Ansichtswechsel, Suche, Undo/Redo, Transform und je nach Ansicht weitere Aktionen), einer Navigationsleiste (Breadcrumb mit dem Pfad zur aktuellen Position) und einer Statusleiste. Die Fußzeile der Karte zeigt eine Statistik des Dokuments und den Hinweis, dass du eine .json-Datei auch einfach auf die Karte ziehen kannst.

Beim ersten Öffnen liegt ein kleines Beispiel-Dokument im Editor — ein Café-Shop mit Produktliste. Es enthält absichtlich die Zahl 9007199254740993, die mit gewöhnlichem JavaScript nicht exakt darstellbar ist (siehe Exakte Zahlen).

Die Werkzeugleiste im Detail

Das Datei-Menü (File)

Das Dropdown File bündelt alles rund um Laden, Speichern und Zwischenablage:

Open file… (Ctrl+O) — öffnet einen Dateidialog. Angeboten werden .json, .geojson, .jsonc, .json5, .map und .txt. Die Datei liest der Browser lokal ein. Gültiges JSON landet direkt im Editor; ist der Inhalt kein gültiges JSON, wird er in der Text-Ansicht geöffnet, und ein Hinweis nennt den Fehler mit Zeile und Spalte („Invalid JSON: … — try Repair."). Statt über den Dialog kannst du eine Datei auch per Drag-and-drop auf die Editor-Karte ziehen.
Load from URL… — lädt JSON von einer öffentlichen Adresse, Details unter Laden von einer URL.
Download (Ctrl+S) — speichert den aktuellen Inhalt als Datei. Gespeichert wird der Text unverändert — so, wie er geladen, getippt oder von Format, Compact oder Repair erzeugt wurde, egal welche Ansicht gerade offen ist. Mit zwei Leerzeichen formatiert wird er nur, wenn du das Dokument zuletzt in Tree oder Table geändert hast (auch per Sort keys dort). Willst du sicher formatiert speichern, klick vorher auf Format. Der Dateiname übernimmt den Namen der geöffneten Datei: Aus orders.json wird beim Download wieder orders.json. Ohne geöffnete Datei heißt sie data.json, nach Load example example.json, nach Replace with clipboard pasted.json. Der Name bleibt (auch über Besuche hinweg), bis du eine neue Quelle lädst oder Clear wählst — Tippen oder Ctrl+V im Editor ändern ihn nicht.
Download compact (.min.json) — speichert das Dokument minifiziert als <name>.min.json, ohne den Editor-Inhalt zu verändern.
Copy — kopiert den Inhalt in die Zwischenablage (nach derselben Regel wie der Download: unverändert, formatiert nur nach einer Änderung in Tree oder Table).
Copy compact — kopiert die minifizierte Fassung.
Replace with clipboard — ersetzt das ganze Dokument durch den Inhalt der Zwischenablage. Der Browser fragt dafür ggf. um Erlaubnis; verweigert er den Zugriff, kannst du stattdessen mit Ctrl+V direkt im Editor einfügen. Ungültiges JSON landet wie beim Öffnen in der Text-Ansicht.
Load example — lädt das Beispiel-Dokument.
Clear — leert den Editor. Enthält das Dokument eigene Daten, kommt vorher eine Sicherheitsabfrage. Der leere Stand wird anschließend auch im Local Storage gespeichert und überschreibt dort die alte Kopie.

Alle Ladevorgänge — öffnen, von URL laden, aus der Zwischenablage ersetzen, Beispiel laden, leeren — sind ein Undo-Schritt: Ctrl+Z holt das vorherige Dokument zurück.

Umwandeln: Format, Compact, Repair, Sort

Format — rückt das JSON mit zwei Leerzeichen pro Ebene ein und schaltet dafür in die Text-Ansicht. Funktioniert nur mit gültigem JSON; bei einem Fehler kommt eine Meldung mit Zeile, Spalte und dem Hinweis „try Repair first".
Compact — minifiziert das JSON: alle Leerzeichen und Zeilenumbrüche zwischen den Elementen fallen weg, das Dokument steht in einer einzigen Zeile. Auch Compact schaltet in die Text-Ansicht, damit du das Ergebnis siehst.
Repair — repariert ungültiges JSON mit der Bibliothek jsonrepair und zeigt das Ergebnis in der Text-Ansicht. Ist das JSON bereits gültig, meldet der Button nur „The JSON is already valid." Was die Reparatur behebt, steht unter Validierung und Reparatur.
Sort keys — sortiert alle Objekt-Schlüssel rekursiv, auf jeder Ebene. Die Reihenfolge von Array-Elementen bleibt unverändert. Sortiert wird „natürlich" und ohne Rücksicht auf Groß- und Kleinschreibung: key2 steht vor key10, B zwischen a und c. Die aktuelle Ansicht bleibt dabei erhalten; in der Text-Ansicht kommt das sortierte Ergebnis mit zwei Leerzeichen eingerückt zurück.

Alle vier Aktionen lassen sich mit Ctrl+Z zurücknehmen. Auf großen Bildschirmen tragen die Buttons ihren Namen, auf kleineren nur das Icon (der Tooltip nennt die Funktion).

Schema

Der Button Schema öffnet den Dialog zur Prüfung gegen ein JSON Schema — beschrieben unter JSON-Schema-Validierung. Ist ein Schema aktiv, ist der Button gelb hinterlegt.

Ansicht: Tree, Table, Text

Die Ansicht wechselst du über die drei Buttons text, tree und table links in der Menüleiste des Editors (siehe Die drei Ansichten). Die zuletzt genutzte Ansicht merkt sich der Browser, der Editor startet beim nächsten Besuch wieder darin.

Vollbild

Der Button Fullscreen gibt dem Editor den ganzen Bildschirm — praktisch für große Dokumente. Esc verlässt den Vollbildmodus wieder, allerdings nur, wenn gerade nichts anderes die Taste braucht: Ist ein Dialog, ein Kontextmenü, das Datei-Menü oder die Suche offen oder bearbeitest du gerade einen Schlüssel oder Wert, beendet Esc den Vollbildmodus nicht. Alternativ klickst du den Button erneut.

Die drei Ansichten

Alle drei Ansichten zeigen dasselbe Dokument; du kannst jederzeit umschalten, ohne Daten zu verlieren.

Tree-Ansicht

Die Standard-Ansicht: das JSON als aufklappbarer Baum.

Knoten ein- und ausklappen, über die Menüleiste auch alle auf einmal.
Schlüssel und Werte direkt inline bearbeiten (Doppelklick).
Einträge per Drag-and-drop umsortieren oder verschieben.
Ein Kontextmenü (Rechtsklick) bietet Aktionen wie Bearbeiten, Kopieren, Einfügen, Duplizieren, Entfernen, Sortieren und den Aufruf des Transform-Werkzeugs.
Eine Suche (Ctrl+F) hebt Treffer im Baum hervor.

Table-Ansicht

Eine tabellarische Sicht, ideal für ein Array von Objekten (z. B. eine API-Liste). Die Felder der Objekte werden zu Spalten, jeder Eintrag wird eine Zeile.

Bearbeiten wie in einer Tabellenkalkulation, Zelle für Zelle.
Spalten durch Klick sortieren.
Zeilen hinzufügen, duplizieren und entfernen (Kontextmenü).
Verschachtelte Felder werden zu zusammengesetzten Spalten aufgefächert.

Bei stark verschachtelten oder uneinheitlichen Strukturen ist die Tabelle weniger nützlich als bei flachen, gleichförmigen Datensätzen — dann ist die Tree- oder Text-Ansicht oft die bessere Wahl.

Text-Ansicht (Code)

Die reine Code-Ansicht auf Basis von CodeMirror 6.

Syntax-Hervorhebung und Zeilennummern.
Code-Faltung (Falten ganzer Objekte/Arrays).
Suchen & Ersetzen direkt im Text.
Eigene Format- und Compact-Knöpfe in der Menüleiste (Ctrl+I bzw. Ctrl+Shift+I).
Fügst du kompaktes JSON ein, fragt der Editor, ob er es formatieren soll.

Hier siehst du das JSON so, wie es als Datei vorliegt — die richtige Ansicht, um Rohtext zu reparieren oder den exakten Aufbau zu kontrollieren. Format, Compact und Repair aus der Werkzeugleiste schalten deshalb automatisch hierher.

Exakte Zahlen und doppelte Schlüssel

Der Editor und alle Aktionen der Werkzeugleiste parsen mit lossless-json statt mit dem JSON-Parser des Browsers. Der Unterschied betrifft Zahlen: Der Standard-Parser rechnet jede Zahl in eine 64-Bit-Gleitkommazahl um. Große Ganzzahlen wie 64-Bit-IDs verlieren dabei ihre letzten Stellen, 1.10 wird zu 1.1, 1e400 zu null. Beim JSON Editor bleiben die Ziffern genau so, wie sie in der Datei stehen — auch nach Format, Compact, Sort keys und Download:

{"id":12345678901234567890,"price":1.10,"huge":1e400}

Ebenso streng ist der Editor bei doppelten Schlüsseln. Ein Objekt wie {"a": 1, "a": 2} ist zwar syntaktisch lesbar, ein normaler Parser behält aber stillschweigend nur den letzten Wert. Der JSON Editor meldet stattdessen den Schlüssel („Duplicate key 'a' …") und lässt das Dokument als Text in der Text-Ansicht stehen, damit kein Wert verloren geht. Tree- und Table-Ansicht stehen erst wieder zur Verfügung, wenn du das Duplikat von Hand entfernt hast — auch Repair nimmt dir diese Entscheidung nicht ab.

Validierung und Reparatur

Der Editor validiert in Echtzeit: Bei jeder Änderung wird der Inhalt geparst, Syntaxfehler werden mit Position angezeigt, und die Statistik in der Fußzeile nennt den Fehler mit Zeile und Spalte. Das ist zunächst eine Syntax-Prüfung — ob deine Daten inhaltlich zu einem Vertrag passen, prüft die JSON-Schema-Validierung.

Für kaputtes JSON gibt es zwei Wege:

Der Button Repair in der Werkzeugleiste repariert das ganze Dokument mit jsonrepair, egal in welcher Ansicht du gerade bist, und zeigt das Ergebnis in der Text-Ansicht.
Die Text-Ansicht des Editors bietet bei einem Parse-Fehler selbst Auto repair an, dazu Show me, das zur Fehlerstelle springt.

Typische Fälle, die sich so beheben lassen:

abschließende Kommas (,] / ,}),
einfache statt doppelter Anführungszeichen,
nicht in Anführungszeichen gesetzte Schlüssel,
Kommentare im JSON,
JSONP-Hüllen wie callback({...}),
Python-Konstanten wie True, False und None,
fehlende schließende Klammern am Ende eines abgeschnittenen Dokuments.

Die Reparatur lässt Zeilenumbrüche und Einrückung des Originals stehen; aufräumen kannst du danach mit Format. Sie ist heuristisch: Was sich eindeutig korrigieren lässt, wird korrigiert — strukturell zerstörte Eingaben kann auch sie nicht retten. Bleibt danach ein Fehler stehen, meldet der Button „Repaired, but: …" mit der Ursache, und du korrigierst die Stelle in der Text-Ansicht von Hand. Doppelte Schlüssel bleiben bei der Reparatur erhalten (siehe oben). Auch die Reparatur ist mit Ctrl+Z umkehrbar.

JSON-Schema-Validierung

Über den Button Schema prüfst du, ob dein Dokument einem JSON Schema entspricht — also ob geforderte Felder vorhanden sind, Typen stimmen und Werte im erlaubten Rahmen liegen. Der Dialog JSON Schema validation bietet:

ein Textfeld, in das du das Schema einfügst,
Open schema file… — lädt das Schema aus einer lokalen .json-Datei und prüft sofort,
Validate — übernimmt das Schema aus dem Textfeld und prüft,
Remove schema — schaltet die Prüfung ab und löscht das gespeicherte Schema.

Unterstützt werden die Drafts 4, 7 (Draft 6 wird wie Draft 7 behandelt), 2019-09 und 2020-12. Welcher gilt, liest das Tool aus der Angabe $schema im Schema; fehlt sie, gilt 2020-12. Externe $ref-Verweise auf andere Dateien oder URLs werden nicht nachgeladen — das Schema muss in sich vollständig sein. Ist das Schema selbst kein gültiges JSON, sagt der Dialog das („Invalid schema: …").

Das Ergebnis erscheint im Dialog: „The document is valid.", „The document is not valid JSON yet." (wenn schon die Syntax nicht stimmt) oder die Zahl der Probleme mit einer Liste der ersten 20 Fundstellen samt Pfad (/products/2/price: …). Im Editor selbst werden die betroffenen Werte als Warnung markiert. Gemeldet wird jeweils der innerste Fehler, damit dieselbe Stelle nicht mehrfach auftaucht.

Ein aktives Schema bleibt aktiv: Der Editor prüft bei jeder Änderung neu, das Schema wird im Local Storage gespeichert und beim nächsten Besuch still wieder eingeschaltet. Das gelbe Badge Schema im Kartenkopf zeigt das an. Die Prüfung läuft im Browser; die Bibliothek erzeugt dafür keinen Programmcode zur Laufzeit.

Laden von einer URL (Load from URL)

File → Load from URL… öffnet den Dialog Load JSON from URL. Du gibst eine http- oder https-Adresse ein und klickst auf Load. Der Abruf läuft — anders als alles andere in diesem Tool — über einen Proxy der Website: Der Browser bittet den Server von jpkc.com, die Adresse abzurufen, und bekommt die Antwort unverändert zurück.

Für den Proxy gelten feste Regeln:

nur öffentliche Adressen — Ziele im lokalen Netz, Loopback und andere private oder reservierte Bereiche werden abgelehnt, auch wenn erst eine Weiterleitung dorthin zeigt,
höchstens 2 MB Antwortgröße („The file is too large."),
10 Sekunden Zeitlimit pro Verbindungsschritt, bis zu fünf Weiterleitungen, zusammen höchstens 30 Sekunden,
ein Rate Limit pro IP-Adresse (bei Überschreitung: „Too many requests"),
ein einfacher Abruf ohne eigene Header oder Zugangsdaten — APIs, die einen Token verlangen, lassen sich so nicht laden.

Die geladene Antwort ersetzt das Dokument als ein Undo-Schritt; Ctrl+Z holt den vorherigen Stand zurück. Der Dateiname für den Download kommt aus dem letzten Pfadsegment der URL. Liefert die Adresse kein gültiges JSON, öffnet der Editor die Antwort als Text.

Transformieren: Filtern, Sortieren, Felder wählen

Über das eingebaute Transform-Werkzeug (Menüleiste des Editors oder Kontextmenü in Tree und Table) baust du JSON um, ohne von Hand zu editieren. Ein Assistent (Wizard) lässt dich:

filtern — nur Einträge behalten, die eine Bedingung erfüllen,
sortieren — nach einem Feld auf- oder absteigend,
Felder auswählen (Projektion) — nur bestimmte Felder übernehmen.

Eine Live-Vorschau zeigt das Ergebnis, bevor du es anwendest. Der Assistent schreibt dabei eine Abfrage in JSONQuery, der Abfragesprache von vanilla-jsoneditor; die kannst du im Dialog auch direkt bearbeiten, etwa für komplexere Umbauten. Eine Transformation lässt sich wie jede Änderung per Undo zurücknehmen.

Suchen und Ersetzen, Undo/Redo

In allen Ansichten gibt es eine Suche (Ctrl+F), die Treffer hervorhebt, und dazu Ersetzen: In der Text-Ansicht stehen die Ersetzen-Felder direkt in der Suchleiste, in Tree und Table blendest du sie mit Ctrl+H oder dem Umschalter im Suchfeld ein. Jede Änderung lässt sich über Undo/Redo (Ctrl+Z / Ctrl+Shift+Z oder die Pfeile in der Menüleiste) zurücknehmen und wiederherstellen — auch die Aktionen der Werkzeugleiste und das Laden eines neuen Dokuments. In der Text-Ansicht fasst der Editor schnell aufeinanderfolgende Eingaben zu einem Undo-Schritt zusammen.

Statistik in der Fußzeile

Die Fußzeile der Editor-Karte zeigt kurz nach jeder Änderung eine Statistik des Dokuments. Ausnahme ist Sort keys: Danach bleibt die alte Statistik stehen, bis du das Dokument das nächste Mal änderst. Für das Beispiel-Dokument sieht sie so aus:

647 B · depth 4 · 6 objects · 5 arrays · 29 keys · 31 values

Größe in Bytes (UTF-8, wie die Datei auf der Platte),
depth — die tiefste Verschachtelungsebene,
objects, arrays, keys — Anzahl der Objekte, Arrays und Schlüssel,
values — Anzahl der einfachen Werte (Strings, Zahlen, Booleans, null).

Ist das JSON ungültig, steht dort stattdessen die Größe und der Parse-Fehler mit Zeile und Spalte. Bei sehr großen Dokumenten (über 20 Millionen Zeichen) zeigt die Fußzeile nur noch die Größe.

Tastenkürzel

Kürzel	Wirkung
`Ctrl+O`	Datei öffnen
`Ctrl+S`	Dokument herunterladen
`Ctrl+Z` / `Ctrl+Shift+Z`	Rückgängig / Wiederherstellen
`Ctrl+F`	Suchen
`Ctrl+I` / `Ctrl+Shift+I`	Formatieren / Kompaktieren (Text-Ansicht)
`Ctrl+D`	Auswahl duplizieren (Tree/Table)
`Esc`	Vollbild verlassen (wenn kein Dialog, Menü oder Eingabefeld offen ist)

Auf dem Mac gilt jeweils Cmd statt Ctrl. Ctrl+O und Ctrl+S greifen auch dann, wenn der Cursor im Editor steht — statt der Dialoge des Browsers.

Speicherung im Browser (Local Storage)

Der Editor speichert deinen Stand automatisch im Local Storage deines Browsers: kurz (0,8 Sekunden) nach der letzten Änderung und zusätzlich, wenn du die Seite verlässt. Gesichert werden der Text des Dokuments, der Dateiname für den Download, die zuletzt genutzte Ansicht und ein aktives JSON Schema. Lädst du die Seite neu oder kommst später wieder, ist alles wieder da. Stände aus älteren Versionen des Tools werden beim ersten Laden übernommen.

Das Badge im Kartenkopf zeigt ehrlich, was passiert ist:

Saved locally — gespeichert (bzw. beim Öffnen wiederhergestellt).
Not saved — too large — Dokumente über 2 Millionen Zeichen werden nicht gespeichert; eine ältere Kopie wird dann gelöscht, damit beim nächsten Besuch kein veralteter Stand auftaucht. Was du behalten willst, sicherst du per Download.
Not saved — der Speicher ist voll oder im Browser gesperrt.

Zwei Konsequenzen daraus:

Komfort: Du verlierst deinen Arbeitsstand nicht durch einen versehentlichen Reload.
Datenschutz auf geteilten Rechnern: Der Inhalt bleibt im Browser liegen, bis du ihn mit Clear leerst (oder die Browser-Daten löschst). Ein gespeichertes Schema entfernt erst Remove schema im Schema-Dialog. Auf einem fremden oder geteilten Gerät solltest du nach der Arbeit mit sensiblen Daten beides nutzen.

Die gespeicherten Daten liegen ausschließlich lokal und werden nicht an einen Server gesendet.

Grenzen

Schema nur in sich geschlossen: Externe $ref-Verweise lädt die Schema-Prüfung nicht nach. Zahlengrenzen wie maximum prüft sie mit gewöhnlicher Gleitkomma-Genauigkeit — bei Zahlen jenseits von 2^53 also nicht auf die letzte Stelle.
Reparatur ist heuristisch: Repair und Auto repair beheben häufige, eindeutige Fehler — keine strukturell zerstörten oder mehrdeutigen Eingaben, und keine doppelten Schlüssel.
Tabelle braucht Struktur: Die Table-Ansicht entfaltet ihren Nutzen bei flachen Arrays von Objekten; bei stark verschachtelten Daten ist Tree/Text besser.
Laden per URL: nur öffentliche Adressen, höchstens 2 MB, keine Zugangsdaten.
Sehr große Dokumente: Die echte Grenze setzt der Arbeitsspeicher deines Browsers — bei sehr großen Dateien kann es zäh werden. Über 2 Millionen Zeichen speichert das Tool den Stand nicht mehr im Local Storage.
Kein Konto, keine Synchronisierung: Dein Stand liegt nur im Local Storage des aktuellen Browsers; er wandert nicht zwischen Geräten.

Für den Einstieg und die Zielgruppen siehe die Übersichtsseite. Konkrete Abläufe zeigen die Beispiele, Kniffe die Tipps & Tricks. Ausprobieren kannst du alles direkt im Tool.