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://git.obraasch.de/olli1986/JSON-Studio

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.

db-bridge.php auf den Server legen und im Kopf der Datei Zugangsdaten, API-Schlüssel und erlaubte Herkunft eintragen
In der Anwendung oben rechts auf das Datenbank-Symbol, Profil anlegen
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.

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.

6.3 KiB Raw Blame History