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, jeden Knopf der Werkzeugleiste, die Echtzeit-Validierung, die Reparatur, 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 (englisch); die Code-Ansicht basiert auf CodeMirror 6. Das ganze Tool läuft rein im Browser — kein Server, kein Upload (siehe Speicherung).

Aufbau der Oberfläche

Oben sitzt eine Werkzeugleiste mit gruppierten Buttons, darunter der eigentliche Editor-Bereich. Eine Navigationsleiste (Breadcrumb mit dem Pfad zur aktuellen Position) und eine Statusleiste rahmen den Editor ein. Ein Badge Local Storage zeigt an, ob dein Stand gerade gesichert ist. Beim ersten Öffnen liegt ein kleines Beispiel-Dokument im Editor.

Die Werkzeugleiste im Detail

Datei: Open, Download, Clear

Open — öffnet einen Dateidialog und lädt eine lokale Datei (.json oder .txt). Gültiges JSON landet direkt als Datenstruktur im Editor; ist der Inhalt kein gültiges JSON, wird er als Rohtext geladen (mit Hinweis), damit du ihn trotzdem reparieren kannst.
Download — speichert den aktuellen Inhalt als Datei data.json (formatiert, mit zwei Leerzeichen Einrückung). Die Datei entsteht im Browser, es geht nichts an einen Server.
Clear — leert den Editor (nach einer Sicherheitsabfrage) und löscht den gespeicherten Stand aus dem Local Storage.

Umwandeln: Format, Compact, Repair, Sort

Format (Beautify) — rückt das JSON sauber ein (zwei Leerzeichen pro Ebene) und macht es lesbar. Funktioniert nur mit gültigem JSON; ist der Inhalt fehlerhaft, kommt eine Fehlermeldung mit der Ursache.
Compact — minifiziert das JSON: alle überflüssigen Leerzeichen und Zeilenumbrüche werden entfernt, sodass es einspaltig in einer einzigen Zeile steht — der Zustand für die Auslieferung oder zum Einbetten. Sichtbar wird das in der Text-Ansicht; in der Tree-Ansicht rendert die Struktur unverändert weiter.
Repair — parst den aktuellen Inhalt neu und meldet das Ergebnis: Ist das JSON gültig, bestätigt der Button das („bereits gültig"); ist es fehlerhaft, meldet er den Fehler. Kaputtes JSON repariert dieser Button nicht — das übernimmt die Auto-Reparatur der Text-Ansicht (Details unter Validierung und Reparatur).
Sort — sortiert alle Objekt-Schlüssel rekursiv alphabetisch. Array-Elemente behalten ihre Reihenfolge — sortiert werden nur die Schlüssel von Objekten, auf jeder Ebene. Das verändert das Dokument; per Undo lässt es sich zurücknehmen.

Zwischenablage: Copy, Paste

Copy — kopiert den formatierten JSON-Text in die Zwischenablage.
Paste — fügt den Inhalt der Zwischenablage ein. Gültiges JSON wird als Datenstruktur übernommen; ist es kein gültiges JSON, landet es als Rohtext im Editor (mit Hinweis).

Ansicht: Tree, Table, Text

Drei Buttons schalten zwischen den drei Ansichten um. Der aktive Modus ist hervorgehoben und wird im Browser gemerkt, sodass der Editor beim nächsten Besuch wieder in derselben Ansicht startet.

Vollbild

Der Vollbild-Button blendet alles um den Editor herum aus und gibt ihm den ganzen Bildschirm — praktisch für große Dokumente. Esc verlässt den Vollbildmodus wieder.

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, um die Struktur zu überblicken.
Schlüssel und Werte direkt inline bearbeiten.
Einträge per Drag-and-drop umsortieren oder verschieben.
Ein Kontextmenü (Rechtsklick) bietet Aktionen wie Einfügen, Duplizieren, Löschen und den Aufruf des Transform-Werkzeugs.
Eine Suche (Tastenkürzel im Editor) 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 und entfernen.
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.
Beim Einfügen von kompaktem JSON bietet der Editor an, es automatisch zu formatieren.

Hier siehst du das JSON so, wie es als Datei vorliegt — die richtige Ansicht, um Rohtext zu reparieren oder den exakten Aufbau zu kontrollieren.

Validierung und Reparatur

Der Editor validiert in Echtzeit: Bei jeder Änderung wird der Inhalt geparst, und Syntaxfehler werden mit Position angezeigt. Wichtig zur Einordnung — das ist eine Syntax-Prüfung (ist das überhaupt wohlgeformtes JSON?), keine Schema-Validierung: Der Editor prüft nicht, ob deine Daten einem bestimmten JSON-Schema oder Vertrag entsprechen, sondern nur, ob die JSON-Syntax stimmt.

Eine Auto-Reparatur ist in der Text-Ansicht eingebaut: Fügst du dort ungültiges JSON ein, meldet der Editor es als fehlerhaft und bietet inline eine Reparatur an. 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,
fehlende Anführungszeichen oder Klammern in einfachen Fällen.

Die Reparatur ist heuristisch: Was sich eindeutig korrigieren lässt, wird korrigiert — fundamental mehrdeutige oder strukturell zerstörte Eingaben kann auch sie nicht retten. Bleibt danach ein Fehler stehen, ist die Stelle mit Position markiert, und du korrigierst sie in der Text-Ansicht von Hand.

Davon zu unterscheiden ist der Toolbar-Button Repair: Er parst den aktuellen Inhalt nur neu und meldet das Ergebnis — bei gültigem JSON „bereits gültig", bei fehlerhaftem den Fehler. Fehlerhaftes JSON repariert dieser Button selbst nicht; dafür ist die Auto-Reparatur der Text-Ansicht da.

Transformieren: Filtern, Sortieren, Felder wählen

Über das eingebaute Transform-Werkzeug (im Kontextmenü bzw. Menü der Tree-Ansicht) 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. Fortgeschrittene können statt des Assistenten direkt eine Abfrage in der JavaScript-Abfragesprache schreiben. Für den Alltag reicht der Assistent — die Abfragesprache ist für komplexere Umbauten gedacht.

Suchen und Ersetzen, Undo/Redo

In allen Ansichten gibt es eine Suche, die Treffer hervorhebt; in der Text-Ansicht zusätzlich Ersetzen. Jede Änderung lässt sich über Undo/Redo zurücknehmen und wiederherstellen — die Historie umfasst die ganze Sitzung.

Speicherung im Browser (Local Storage)

Der Editor speichert deinen Stand automatisch im Local Storage deines Browsers — bei jeder Änderung. Lädst du die Seite neu oder kommst später wieder, ist dein letzter Inhalt (und die zuletzt genutzte Ansicht) wieder da; ein Hinweis bestätigt das Wiederherstellen. Das Badge Local Storage in der Werkzeugleiste signalisiert den Status.

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 Clear drückst (oder die Browser-Daten löschst). Auf einem fremden oder geteilten Gerät solltest du nach der Arbeit mit sensiblen Daten Clear nutzen.

Die Daten liegen ausschließlich lokal — sie werden nie an einen Server gesendet.

Grenzen

Syntax statt Schema: Die Validierung prüft Wohlgeformtheit, nicht die Übereinstimmung mit einem JSON-Schema.
Reparatur ist heuristisch: Die Auto-Reparatur der Text-Ansicht behebt häufige, eindeutige Fehler — keine strukturell zerstörten oder mehrdeutigen Eingaben.
Tabelle braucht Struktur: Die Table-Ansicht entfaltet ihren Nutzen bei flachen Arrays von Objekten; bei stark verschachtelten Daten ist Tree/Text besser.
Sehr große Dokumente: Die zugrunde liegende Bibliothek ist auf große Dateien ausgelegt (nominell bis in den dreistelligen-MB-Bereich), die echte Grenze setzt aber der Arbeitsspeicher deines Browsers — bei sehr großen Dateien kann es zäh werden.
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.