Überblick
JSON lokal bearbeiten, formatieren, reparieren, durchsuchen, vergleichen, validieren und in weitere Datenformate konvertieren.
Funktionen
- Lokaler JSON-Editor
- Formatierung und Reparatur
- Schema-Validierung
- Diff und Konvertierung
Anleitung
Stand: P0031_RC2
Zweck und Grundprinzip
JSON Studio ist eine lokale, offlinefähige Arbeitsumgebung zum Bearbeiten, Prüfen, Vergleichen und Konvertieren strukturierter Daten. Source ist immer maßgeblich. Tree, Table, Schema, Validator, Semantic, Graph und Diff zeigen denselben Dokumentzustand oder arbeiten ausdrücklich mit einer Vergleichsquelle. Änderungen aus einer Ansicht werden nachvollziehbar nach Source übertragen und können rückgängig gemacht werden.
Dokumentinhalte werden für die Kernfunktionen weder hochgeladen noch automatisch dauerhaft gespeichert. Desktop und Web verwenden dieselbe Workbench und denselben Core; lediglich Datei-, Download- und Zwischenablageadapter unterscheiden sich.
Voraussetzungen
Erforderlich sind ein aktueller Browser oder die Akyao-Desktopanwendung und lokale strukturierte Daten. JavaScript muss aktiviert sein. Datei- und Zwischenablagezugriff werden nur nach einer Benutzeraktion angefordert.
Schritte
Datei öffnen oder JSON eingeben, Source mit Diagnostics beziehungsweise den Fachansichten prüfen, gewünschte Änderungen oder Konvertierungen ausführen und das Ergebnis ausdrücklich speichern oder herunterladen.
Parameter
Einrückung, finaler Newline, Such- und Query-Ausdrücke, Schema, Diff-Quelle, Konverteroptionen, Filter, Pagination und Ansichtsgrößen werden direkt in der Workbench eingestellt.
Ergebnis
Das Ergebnis ist eine geprüfte JSON-Quelle oder ein ausdrücklich erzeugter lokaler Export einschließlich nachvollziehbarer Diagnosen, Reports oder Patches.
Typische Fehler
Ungültige Syntax, ein nicht zur Struktur passender Tabellenmodus, ein ungeeignetes Konvertierungsformat oder fehlende Browserberechtigungen können einzelne Aktionen blockieren. Source wird dabei nicht still ersetzt.
Fehlerbehebung
Diagnostics öffnen, zur gemeldeten Position navigieren, Repair nur nach Prüfung anwenden und bei Layoutproblemen den Workspace zurücksetzen. Bei Datei- oder Clipboard-Problemen Format, Berechtigung und sicheren Browserkontext prüfen.
Werkzeugleiste und IconButtons
Tooltip und zugänglicher Name erklären jeden Button auch ohne Farbwahrnehmung. Die folgenden AT-IconButtons entsprechen den zentralen Befehlen der Oberfläche.
| IconButton | Befehl | Wirkung |
|---|---|---|
| Öffnen | Öffnet JSON direkt oder startet für TOML, YAML, JSON5, NDJSON, CSV und XML einen bestätigten Import. | |
| Speichern | Speichert JSON am aktuellen Ziel; im Browser wird eine lokale Datei heruntergeladen. | |
| Speichern unter | Speichert unter einem neuen Namen beziehungsweise startet einen neuen Download. | |
| Einfügen | Liest Text nach ausdrücklicher Zwischenablagefreigabe ein. | |
| Kopieren | Kopiert Source oder den jeweils bezeichneten Wert, Pfad, Bericht oder Patch. | |
| Rückgängig | Nimmt den letzten Source-Schritt zurück. | |
| Wiederholen | Stellt den zuletzt zurückgenommenen Schritt wieder her. | |
| Zurücksetzen | Leert Source erst nach der zugehörigen Benutzeraktion. | |
| Formatieren | Formatiert gültiges JSON mit 2 Spaces, 4 Spaces oder Tab und optionalem finalen Newline. | |
| Minify | Entfernt nicht benötigte Zwischenräume aus gültigem JSON. | |
| Keys sortieren | Sortiert Objekt-Keys nach Bestätigung; die strukturelle Änderung bleibt rückgängig machbar. | |
| Repair | Zeigt ausschließlich sichere Reparaturschritte vor dem Anwenden. | |
| Suchen | Öffnet die Source-Suche. | |
| Suchen und Ersetzen | Öffnet die Ersetzen-Leiste für die Quelle. | |
| Alles auswählen | Markiert den vollständigen Source-Text. | |
| Zeilenumbruch | Schaltet den visuellen Zeilenumbruch ein oder aus. | |
| Workspace zurücksetzen | Stellt Ansichten, Filter und Splitter zurück, ohne Source zu verändern. |
Arbeitsbereiche und Layout
Links befinden sich Inspector, Diagnostics, Search und Query. Rechts stehen Code / Data Tools, Tree, Table, Schema, Validator, Semantic, Graph und Diff zur Verfügung. Sidebars und Trenner lassen sich mit Maus, Pointer oder Pfeiltasten anpassen. Die rechte Arbeitsfläche kann eingeklappt werden. Ctrl+Shift+0 stellt das kanonische Layout wieder her, ohne das Dokument anzutasten.
Statusanzeigen unterscheiden gültiges JSON, ungültige editierbare Zwischenstände und den letzten gültigen Analysezustand. Ein Fehler in einer abgeleiteten Ansicht überschreibt Source nicht.
Dateien, Drag-and-drop und Zwischenablage
Desktop verwendet native Dialoge für Öffnen, Speichern und Speichern unter. Im Browser bleiben Dateien lokal: Öffnen verwendet den File Picker, Speichern und Exporte erzeugen Downloads. JSON wird direkt geladen. TOML, YAML, JSON5, NDJSON, CSV und XML öffnen einen expliziten Konvertierungsdialog. Abbruch, unlesbare Dateien oder fehlgeschlagene Konvertierungen lassen Source unverändert.
Drag-and-drop folgt demselben sicheren Importweg. Zwischenablageaktionen benötigen im Browser eine Benutzeraktion und gegebenenfalls eine Berechtigung. Der letzte gültige Inhalt bleibt erhalten, wenn eine Operation scheitert.
Source-Editor, Formatierung und Repair
CodeMirror bietet Syntaxhervorhebung, Zeilennummern, Folding, Klammerzuordnung, Suche/Ersetzen, Zeilenumbruch, Marker sowie Undo/Redo. Ungültige Zwischenzustände bleiben editierbar. Navigation aus Diagnostics, Search, Query, Tree, Validator, Semantic, Graph oder Diff fokussiert die passende Quellstelle.
Formatieren verarbeitet nur gültiges JSON. Minify verdichtet es ohne Werte zu ändern. Keys sortieren verändert bewusst die Reihenfolge und verlangt eine ausdrückliche Bestätigung. Repair zeigt vorab, welche sicheren Syntaxkorrekturen angewendet würden; ohne sichere Änderung bleibt Anwenden deaktiviert.
Inspector und Diagnostics
Der Inspector zeigt Typ, Key, Wert, JSONPath, JSON Pointer, Subtree und semantische Zusatzinformationen des gewählten Knotens. Einzelne Werte, Pfade, Pointer oder Teilbäume können kopiert werden. Primitive Werte lassen sich kontrolliert ändern und als Undo-Schritt nach Source übernehmen.
Diagnostics meldet Syntaxfehler, Duplicate Keys und unsichere Integer. Einträge sind navigierbar; Previous/Next bewegt sich durch die Treffer. Berichte können kopiert werden. Sichere Sammelreparaturen bleiben ein bestätigter Repair-Schritt.
Search und Query
Search durchsucht Keys, Values und Pfade und kann nach Datentyp filtern. Treffer lassen sich vorwärts und rückwärts durchlaufen; JSONPath und Pointer können kopiert werden. Verlauf und Favoriten unterstützen wiederkehrende Suchen.
Query verwendet einen lokalen JSONPath-Kern mit Child-Zugriff, Arrayindex, Wildcard, Recursive Descent, Slice, Union und Filtern. IntelliSense, Verlauf und Favoriten helfen bei der Eingabe. Ergebnisse können fokussiert und kopiert werden. Es wird kein JavaScript-eval ausgeführt.
Tree und Table
Tree unterstützt Auf- und Zuklappen, Root-Auswahl, vollständige Zeilenselektion, Source-Synchronisation, Kopieren von Pfad/Pointer und das Bearbeiten primitiver Werte. Änderungen erscheinen als reguläre, rückgängig machbare Source-Edits.
Table wird für sinnvoll tabellarische Arrays aus Objekten angeboten. Spalten entstehen aus den vorhandenen Object Keys. Sortierung und Filter verändern nur die Ansicht. Editierbare Zellen schreiben kontrolliert nach Source zurück. Große Tabellen werden über AT-Spreadsheet virtualisiert.
Schema und Validator
Schema erzeugt aus dem aktuellen Dokument ein JSON Schema Draft 2020-12 und kennzeichnet, dass Typen aus Beispieldaten inferiert wurden. Das Schema kann geöffnet, gespeichert, bearbeitet und kopiert werden. Aus einem Schema kann nach ausdrücklicher Aktion ein Beispieldokument erzeugt werden.
Validator prüft Source gegen das aktuelle Schema. Ergebnisse enthalten Schema- und JSON-Pfade, Quelle und Kategorie. Filter, Previous/Next, Refresh und kopierbarer Report stehen bereit. Syntaxfehler in Dokument oder Schema werden getrennt ausgewiesen.
Semantic Explorer und Graph
Semantic erkennt unter anderem URLs, E-Mail-Adressen, Farben, Bilder, Datum/Zeit, Base64 und eingebettetes JSON, ohne den tatsächlichen JSON-Typ zu ersetzen. Suche, Filter, Seitennavigation, Previous/Next, Reindex und Report arbeiten auf dem lokalen Index.
Graph visualisiert die JSON-Hierarchie und synchronisiert die Auswahl mit Source. Suche, Zoom, Fit, Tiefenbegrenzung, Minimap und Subtree-Fokus helfen bei großen Strukturen. Werte und Keys können bearbeitet, Knoten ergänzt oder gelöscht werden. SVG- und PNG-Export werden lokal erzeugt.
Eingebettete Bild-Daten werden lokal angezeigt. Externe Bild-URLs werden nicht automatisch geladen; URL öffnen ruft sie erst nach einer bewussten Benutzeraktion auf.
Diff, Patch und Review
Diff vergleicht Source semantisch mit einer Vergleichsquelle und unterscheidet Added, Removed, Changed, Type Changed und Moved. Filter, F7/Shift+F7 und Mehrfachauswahl unterstützen die Navigation. Einzelne, ausgewählte, gefilterte oder alle Änderungen können in beide Richtungen angewendet werden.
JSON Patch verwendet RFC-6902-Operationen und korrektes RFC-6901-Escaping. Guarded Patches ergänzen test-Operationen gegen veraltete Zieldaten. Root Replacement, Move Detection, Merge-Konfliktstrategien, Review/Skip, Snapshots, Bundles, portable Sessions und Berichte sind Bestandteil desselben lokalen Workflows.
Data Tools und Formate
Data Tools unterstützt TOML↔JSON, YAML↔JSON, JSON5↔JSON, NDJSON↔JSON, CSV↔JSON und XML↔JSON sowie Flatten/Unflatten, JSON Patch, Merge Patch, Schema Generate/Validate, TypeScript, Duplicate-Key Fix, Sortierung des gewählten Knotens und RFC 8785/JCS. XML- und CSV-Abbildungen sind deterministisch, aber nicht für jede beliebige Struktur verlustfrei; ungeeignete Eingaben werden deshalb nicht still umgedeutet.
Input kann aus Source, Datei oder Live Input stammen. History, Output-Chaining, Roundtrip-Prüfung und Converter Audit dokumentieren den Ablauf. JSON-Ergebnisse werden nur auf ausdrücklichen Befehl als einzelner Undo-Schritt nach Source übernommen.
Tastatur
| Kürzel | Funktion |
|---|---|
Ctrl+F / Ctrl+H | Source suchen / suchen und ersetzen |
Ctrl+Z / Ctrl+Y | Rückgängig / wiederholen |
Ctrl+Shift+0 | Workspace zurücksetzen; Source bleibt unverändert |
Alt+1 bis Alt+6 | Code, Tree, Table, Schema, Validator oder Semantic öffnen |
F7 / Shift+F7 | Nächste / vorherige Diff-Änderung |
Alt+ArrowLeft / Alt+ArrowRight | Semantic-Seite wechseln |
| Pfeiltasten am Trenner | Größe des angrenzenden Bereichs ändern |
Unter macOS entsprechen Ctrl-Befehle den üblichen Cmd-Varianten. Weitere Diff-Kürzel stehen in docs/KEYBOARD_SHORTCUTS.md.
Lokale Speicherung, Datenschutz und Fehlerbehebung
Im Browser speichert JSON Studio ausschließlich UI-Zustände wie Layout, Filter und Verlauf namensraumbezogen in localStorage; Source-Inhalte werden nicht automatisch dort abgelegt. Desktop-Sitzungen, Snapshots und explizite Dateien entstehen nur durch die beschriebenen lokalen Aktionen. Die Kernfunktionen benötigen weder Upload, Tracking noch externen Dienst.
Bei ungültiger Syntax zuerst Diagnostics öffnen und zur gemeldeten Position springen. Bei einem ungeeigneten Importformat den Konvertierungsdialog abbrechen und die Quelldatei prüfen. Wenn Clipboard im Browser blockiert ist, Seitenberechtigung und sicheren Kontext prüfen. Bei großen Dokumenten Filter, Pagination beziehungsweise die passenden virtualisierten Ansichten verwenden. Workspace zurücksetzen behebt Layoutprobleme, ohne Source zu löschen.
Datenquellen
akyao.development.json-studio
Keine eingebettete externe Datenquelle. Eingegebene Dokumente und Bilder stammen vom Benutzer.
Runtime-Abhängigkeiten nach Tool
- @dagrejs/dagre 3.1.1: MIT
- @dagrejs/graphlib 4.0.5: MIT
- @dmsnell/diff-match-patch 1.1.0: Apache-2.0
- @hyperjump/browser 1.5.0: MIT
- @hyperjump/json-pointer 1.1.2: MIT
- @hyperjump/json-schema-formats 1.0.6: MIT
- @hyperjump/json-schema 1.17.8: MIT
- @hyperjump/pact 1.4.0: MIT
- @hyperjump/uri 1.3.6: MIT
- @types/d3-color 3.1.3: MIT
- @types/d3-drag 3.0.7: MIT
- @types/d3-interpolate 3.0.4: MIT
- @types/d3-selection 3.0.11: MIT
- @types/d3-transition 3.0.9: MIT
- @types/d3-zoom 3.0.8: MIT
- @xyflow/react 12.11.2: MIT
- @xyflow/system 0.0.79: MIT
- classcat 5.0.5: MIT
- content-type 1.0.5: MIT
- d3-color 3.1.0: ISC
- d3-dispatch 3.0.1: ISC
- d3-drag 3.0.0: ISC
- d3-ease 3.0.1: BSD-3-Clause
- d3-interpolate 3.0.1: ISC
- d3-selection 3.0.0: ISC
- d3-timer 3.0.1: ISC
- d3-transition 3.0.1: ISC
- d3-zoom 3.0.0: ISC
- idn-hostname 15.1.19: MIT
- json-stringify-deterministic 1.0.16: MIT
- jsondiffpatch 0.7.6: MIT
- just-curry-it 5.3.0: MIT
- punycode 2.3.1: MIT
- react-dom 19.2.8: MIT
- react 19.2.8: MIT
- scheduler 0.27.0: MIT
- use-sync-external-store 1.6.0: MIT
- uuid 14.0.1: MIT
- zustand 4.5.7: MIT