# JSON Studio & MariaDB Workbench Zwei JSON-Editoren nebeneinander, die komplett im Browser laufen. Gedacht für den Alltag mit Daten aus Shops, Schnittstellen und Tabellen: importieren, vergleichen, umformen, wieder ausgeben. **Live nutzen:** [https://software.obraasch.de/json-workbench/json-workbench.html](https://software.obraasch.de/json-workbench/json-workbench.html) --- ## Funktionen **Import** JSON · CSV · Excel (xlsx/xls, auch mehrere Blätter) · YAML (auch mehrere Dokumente) · XML · SQL-Dump (liest `INSERT`-Anweisungen zurück, auch mit mehreren Tabellen) · direkt von einer URL · aus einer Datenbank über eine HTTP-Brücke **Export** JSON · CSV · Excel · YAML · XML · JSON-Schema (Draft 2020-12) · an einen Webhook senden · in eine Datenbank schreiben (anhängen, ersetzen oder aktualisieren) **MariaDB-Skript-Generator** `CREATE TABLE` + `INSERT` aus den vorhandenen Daten, mit: - automatischer Typerkennung inklusive Unterscheidung zwischen `INT` und dem größeren `BIGINT` bei sehr großen Zahlen - manueller Korrektur jedes Spaltentyps (mit Längenangabe und Erklärung, wofür welcher Typ gedacht ist) - wählbarem Primärschlüssel: automatische `id`-Spalte, eine vorhandene Spalte, oder mehrere zusammen als zusammengesetzter Schlüssel - Umbenennung einzelner Spalten für den SQL-Namen, unabhängig vom JSON-Feldnamen - Einstellungen werden pro Dokument gemerkt, bis der Editor geleert wird **Arbeiten mit zwei Dokumenten** Inhalt hin- und herkopieren · Verschachtelungen auflösen („Flatten“, nötig für CSV/Excel/Datenbank) · Feld-für-Feld-Vergleich mit Bericht als Markdown oder CSV · Pfad eines Feldes kopieren (z. B. für n8n-Ausdrücke) **Komfort** Hell- und Dunkelmodus · Dateiname wird beim Öffnen automatisch zum Dokumentnamen · Liste der letzten 5 geöffneten Dateien pro Editor · Snippet-Bibliothek für wiederkehrende Vorlagen · optionale automatische Sicherung als Download in festem Abstand (standardmäßig aus) · Tastaturkürzel · integrierte Anleitung mit Tooltips · Sicherung aller Einstellungen, Snippets und Datenbank-Profile als JSON-Datei für den Umzug auf einen anderen Rechner --- ## Installation Es genügt, `json-workbench.html` auf einen Webserver zu legen. Die Datei ist in sich abgeschlossen und braucht keinen Build-Schritt. ### Bibliotheken lokal ablegen (empfohlen) Ohne lokale Kopien lädt die Anwendung ihre Bibliotheken von einem öffentlichen CDN. Das funktioniert, überträgt aber die IP-Adressen deiner Nutzerinnen und Nutzer an einen Dritten — in Deutschland ein datenschutzrechtliches Thema, das du dir sparen kannst. Lege stattdessen an: ``` json-workbench.html lib/ papaparse.min.js xlsx.full.min.js js-yaml.min.js jsoneditor/ standalone.js ``` Die Quelladressen (mit fest angegebener Version, um unangekündigte Änderungen zu vermeiden) stehen als Kommentar im Kopf der HTML-Datei. Der JSON-Editor bringt seine Stile seit Version 3 direkt im Skript mit — eine separate CSS-Datei ist dafür nicht mehr nötig. Lege die `LICENSE`-Dateien der Bibliotheken gleich mit in `lib/` ab. Die Anwendung sucht immer zuerst lokal und geht nur ins Netz, wenn sie dort nichts findet. Welche Quelle benutzt wurde, zeigt die Anleitung unter „Offline-Betrieb“ an. **Wichtig:** Der JSON-Editor ist ein ES-Modul. Browser verbieten das Laden solcher Module über `file://`. Per Doppelklick geöffnet, holt die Seite den Editor deshalb weiterhin aus dem Netz. Für echten Offline-Betrieb muss der Ordner über einen Webserver ausgeliefert werden — `python3 -m http.server` im Ordner genügt zum Ausprobieren. --- ## Datenbankanbindung (optional) Ein Browser kann sich nicht direkt mit MariaDB oder MySQL verbinden. Dafür liegt `db-bridge.php` bei: ein kleines Serverskript, das die Anfragen entgegennimmt und an die Datenbank weiterreicht. 1. `db-bridge.php` auf den Server legen und im Kopf der Datei Zugangsdaten, API-Schlüssel und erlaubte Herkunft eintragen 2. In der Anwendung oben rechts auf das Datenbank-Symbol, Profil anlegen 3. Auf „Testen“ klicken — erscheint die Tabellenliste, steht die Verbindung ### Bitte beachten - Lege einen **eigenen Datenbankbenutzer** mit genau den nötigen Rechten an. Niemals `root` verwenden. - Betreibe die Brücke **ausschließlich über HTTPS**. - Die Aktion `query` lässt bewusst nur lesende Abfragen zu. Alle Werte gehen über vorbereitete Statements; Tabellennamen werden gegen ein striktes Muster geprüft, weil sie sich nicht als Parameter binden lassen. - Schreibzugriffe lassen sich über `WRITES_ALLOWED` komplett abschalten. - Der API-Schlüssel wird im Browser-Speicher der Nutzer abgelegt. Behandle ihn wie ein Passwort und tausche ihn aus, wenn ein Gerät abhandenkommt. - Der Schreibmodus „Ersetzen“ führt ein `TRUNCATE` aus und löscht damit alle bestehenden Zeilen der Zieltabelle. --- ## Datenschutz & Datenhaltung Alles, was hier bearbeitet wird, bleibt im Browser. Es wird nichts an den Server übertragen, von dem die Seite geladen wurde — außer bewusst über URL-Import, Webhook-Versand oder Datenbankanbindung, jeweils an eine selbst angegebene Adresse. Inhalte, Namen, Einstellungen, Snippets und Datenbank-Profile liegen im lokalen Speicher (`localStorage`) des jeweiligen Browsers. --- ## Auf der eigenen Domain veröffentlichen Eine kleine Übersichtsseite, die dieses und weitere Werkzeuge automatisch auflistet, liegt in einem eigenen Repository: https://git.obraasch.de/olli1986/software-obraasch-de-overview Dort finden sich außerdem Vorlagen für Impressum und Datenschutzerklärung sowie Hinweise zur Absicherung des Webservers. --- ## Lizenz Dieses Projekt steht unter der MIT-Lizenz, siehe [LICENSE](LICENSE). Eingebundene Bibliotheken und ihre Lizenzen: | Bibliothek | Lizenz | Projekt | |---|---|---| | vanilla-jsoneditor | ISC | https://github.com/josdejong/svelte-jsoneditor | | PapaParse | MIT | https://github.com/mholt/PapaParse | | js-yaml | MIT | https://github.com/nodeca/js-yaml | | SheetJS (xlsx) | Apache-2.0 | https://github.com/SheetJS/sheetjs | SheetJS steht unter Apache-2.0. Bei Weitergabe muss der Lizenztext beiliegen und es müssen Änderungen an den Dateien kenntlich gemacht werden — am einfachsten, indem du die unveränderte Datei samt ihrer `LICENSE` in `lib/` ablegst. --- ## Hinweis Entstanden als Projekt von Oliver Braasch, mit Unterstützung von Claude (Anthropic) bei Entwurf, Umsetzung und Dokumentation.