# JSON Editor — Manual > Vollständige Funktionsbeschreibung des JSON Editors: die drei Ansichten, jeder Button, Validierung, Reparatur, Transform, Local Storage und Grenzen. Source: https://www.jpkc.com/db/tools/json/manual/ Zurück zur Übersicht: [JSON Editor](https://www.jpkc.com/db/tools/json/) · Tool live öffnen: [www.jpkc.com/tools/json/](https://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](https://github.com/josdejong/svelte-jsoneditor) (englisch); die Code-Ansicht basiert auf CodeMirror 6. Das ganze Tool läuft rein im Browser — kein Server, kein Upload (siehe [Speicherung](#speicherung-im-browser-local-storage)). ## 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](#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](#die-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](#transformieren-filtern-sortieren-felder-waehlen)-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](https://www.jpkc.com/db/tools/json/). Konkrete Abläufe zeigen die [Beispiele](https://www.jpkc.com/db/tools/json/examples/), Kniffe die [Tipps & Tricks](https://www.jpkc.com/db/tools/json/tips/). Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/json/).