Code
Der JSON-Editor zeigt deinen JSON-Code und die Daten als Baum nebeneinander. Klappe Objekte und Arrays auf und zu, sieh Typ und Anzahl Einträge jedes Werts und ändere Schlüssel und Werte direkt im Baum - die Änderung kommt genau an dieser Stelle in den Code, und der Rest der Datei behält seine Formatierung. Fehler werden mit Zeile und Spalte aufgelistet, und die Daten lassen sich gegen ein JSON Schema prüfen und in YAML, CSV oder XML umwandeln.
Alles läuft in deinem Browser. Dokumente werden nicht hochgeladen, es gibt keine Anmeldung und keine Werbung.
Hervorgehobenes JSON links, der aufklappbare Baum in der Mitte. Ein Klick in den Baum springt zum Code, der Cursor im Code markiert seinen Wert im Baum, der Pfad ($.items[3].name) wird immer angezeigt.
Schlüssel und Werte ändern, Einträge hinzufügen, duplizieren, verschieben und entfernen, einen Typ ändern - jeweils als kleine Änderung des Codes, ein Schritt für «Rückgängig».
Ein fehlendes Komma oder Anführungszeichen, doppelte Schlüssel und Werte, die nicht zu deinem JSON Schema passen, jeweils mit Zeile und Spalte. JSON mit Kommentaren und JSON5 werden auch gelesen.
Schlüssel und Werte durchsuchen; jeder Treffer wird im Baum markiert, Enter geht zum nächsten.
Formatieren, verkleinern und Schlüssel sortieren, oder in YAML, CSV (ein Array von Objekten ist eine Tabelle) und XML umwandeln. YAML-, CSV- und XML-Dateien öffnen sich als JSON.
Behalte beliebig viele Dokumente in deinem Browser, jedes mit eigenem Rückgängig-Verlauf, und lade sie alle als ZIP herunter.
Jede https-Seite (und localhost) kann den Editor mit einem <iframe> und ?embed=1 einbetten - ohne Anmeldung, ohne Schlüssel. Eingebettet blendet der Editor diesen Text aus und zeigt einen Speichern-Knopf. Das Dokument kommt auf zwei Arten hinein und wieder heraus.
src= öffnet eine Datei (dein Server muss CORS erlauben), webhook= lässt «Speichern» (Ctrl+S) das Dokument an diese Adresse senden. Füge &token=… für einen Authorization: Bearer …-Header hinzu und &auto, um nach jeder Änderung zu speichern.
<iframe src="https://json.giit.ch/?embed=1&src=https://your-site.com/config/app.json&webhook=https://your-site.com/save.php"
allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>Der Webhook erhält einen POST mit JSON { editor: "json", event: "save", id, name, content, updated }; content ist das Dokument als String. Ein kleines PHP-Skript, das ihn speichert:
<?php
header('Access-Control-Allow-Origin: https://json.giit.ch');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
header('Access-Control-Allow-Methods: POST, OPTIONS');
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') exit;
if (($_SERVER['HTTP_AUTHORIZATION'] ?? '') !== 'Bearer SECRET') { http_response_code(403); exit; }
$d = json_decode(file_get_contents('php://input'), true);
$name = preg_replace('/[^\w\- ]/u', '_', $d['name']);
file_put_contents(__DIR__ . "/config/$name.json", $d['content']);
echo '{"ok":true}';Der Editor meldet jsoneditor:ready, deine Seite antwortet mit jsoneditor:load, der Editor meldet jsoneditor:loaded, jsoneditor:change bei echten Änderungen und jsoneditor:save, wenn gespeichert wird. Deine Seite kann jsoneditor:get (den aktuellen Stand) oder jsoneditor:save (Speichern drücken) senden. Gespeichert wird dann über dein eigenes Login und deine eigene Sitzung.
<iframe id="ed" src="https://json.giit.ch/?embed=1" allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>
<script>
const ed = document.getElementById('ed');
const ORIGIN = 'https://json.giit.ch';
addEventListener('message', async e => {
if (e.source !== ed.contentWindow || e.origin !== ORIGIN) return;
const m = e.data;
if (m.type === 'jsoneditor:ready') { // der Editor ist bereit: ihm das Dokument geben
ed.contentWindow.postMessage({
type: 'jsoneditor:load',
name: 'Settings',
content: await (await fetch('/config/app.json')).text()
}, ORIGIN);
}
if (m.type === 'jsoneditor:change') document.title = '● not saved'; // eine echte Änderung
if (m.type === 'jsoneditor:save') { // es wurde auf "Speichern" geklickt
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content }) });
document.title = 'Saved';
}
});
// Ein Speichern-Knopf auf deiner eigenen Seite: die Antwort kommt als jsoneditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'jsoneditor:get' }, ORIGIN); }
</script>KI-Assistent in deiner Seite: Er funktioniert auch im Frame. Mit allow="clipboard-write" am iframe nutzt «Prompt kopieren» direkt die Zwischenablage (sonst greift der Editor auf den alten Kopierbefehl zurück oder zeigt den Prompt zum Kopieren von Hand). Ein Link der KI erreicht keinen Editor in einer anderen Website, darum sagt der Editor der KI und dir, die ganze Antwort der KI stattdessen in den Editor einzufügen - oder den Editor in einem eigenen Fenster zu öffnen.
window.open("https://json.giit.ch/?embed=window", "jsoneditor-17") öffnet den vollen Editor in einem eigenen Fenster, das dieselben Meldungen mit window.opener austauscht. Links einer KI erreichen ihn dort. jsoneditor:load kann auch context: { host, title, rules } mitgeben - der KI-Prompt sagt dann, wohin das Dokument gehört, und befolgt deine Regeln - sowie hook: { url, token }, einen Webhook nur für dieses Dokument, der nie gespeichert wird. Wird das Fenster mit ungespeicherten Änderungen geschlossen, kommt jsoneditor:closing.
Gib dem Editor deinen eigenen Prompt, eine Adresse auf deiner Website und einen Schlüssel für diese Editor-Sitzung. Der KI-Dialog zeigt dann «Verbunden mit» deiner Website, was du der KI sagst, und die Wahl das aktuelle Dokument ändern oder ein neues erstellen; Prompt kopieren setzt alles zusammen. Die KI sendet ihr Ergebnis mit dem Schlüssel an deinen Server, und deine Seite öffnet es im Editor - ein neues Dokument öffnet sich separat und bleibt im Browser der Person, die schreibt. Ein Schlüssel pro Editor-Sitzung: Er bleibt gültig, solange der Editor offen ist, und nur solange er keinen hat, fragt der Editor mit jsoneditor:key-request danach. Der Editor sendet den Schlüssel selbst nie und speichert ihn nie; die Adresse muss https auf deinem eigenen Host oder einer Subdomain davon sein.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // ein Schlüssel pro Editor-Sitzung
const k = await key();
ed.contentWindow.postMessage({ type: 'jsoneditor:load', name: 'Settings', content, ai: {
label: 'My Site', prompt: 'Keep every key. Only change values.',
endpoint: 'https://your-site.com/api/ai-result.php', key: k.key } }, ORIGIN);
// die id aus jsoneditor:loaded merken und change/save/closing mit anderer id ignorieren
// nur solange der Editor keinen Schlüssel hat:
if (m.type === 'jsoneditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'jsoneditor:ai', key: k.key }, ORIGIN); }
// solange der Editor offen ist, jede Minute deinem Server melden; Schliessen des Editors oder der Seite macht den Schlüssel ungültig
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// dein Server hat ein Ergebnis (Polling, SSE …): target ist "current" oder "new"
ed.contentWindow.postMessage({ type: 'jsoneditor:load', name: 'Settings', content: draft, from: 'ai', target }, ORIGIN);Erzeuge Schlüssel mit mindestens 128 Zufallsbits, speichere nur ihren Hash, binde jeden an die angemeldete Person, das Dokument und diese Editor-Sitzung, erzeuge einen pro Sitzung, lass ihn nur gültig, solange deine Seite die Sitzung als offen meldet, und mach ihn ungültig, wenn der Editor oder die Seite schliesst.
Das ganze Protokoll steht in llms.txt - gib es einer KI, und sie baut die Anbindung für dein System. Der YAML-Editor funktioniert gleich, mit dem Präfix yamleditor: - yaml.giit.ch.
Nein. Der Editor läuft ganz in deinem Browser. Deine Dokumente werden nie an einen Server gesendet, ausser du richtest selbst einen Webhook zu deinem eigenen Server ein.
Ja. Klicke im Baum auf einen Schlüssel oder einen Wert, tippe und drücke Enter. Die Änderung wird genau an dieser Stelle in den Code geschrieben - der Rest behält seine Formatierung - und «Rückgängig» nimmt sie zurück. Die Knöpfe über dem Baum fügen Einträge hinzu, duplizieren, verschieben und entfernen sie und ändern den Typ eines Werts.
Ja. Kommentare, Kommas am Ende, einfache Anführungszeichen und Schlüssel ohne Anführungszeichen werden gelesen und im Baum gezeigt, mit einem Hinweis, dass sie kein reines JSON sind. «Formatieren» schreibt reines JSON.
Öffne das JSON Schema als zweites Dokument oder füge es ein, und wähle es dann im Tab Prüfschema. Jede Stelle, die nicht passt, wird mit Zeile und Spalte aufgelistet. Der Editor lädt nie ein Schema aus dem Internet - eine $schema-Adresse im Dokument wird nur angezeigt.
Ja, im Tab Umwandeln oder unter «Exportieren». CSV braucht ein Array von Objekten - jedes Objekt ist eine Zeile. YAML-, CSV- und XML-Dateien, die du öffnest, werden in JSON umgewandelt.
Nur in deinem Browser. Klicke oben links auf den Ordner-Knopf (Meine Dokumente), um sie zu öffnen, umzubenennen, zu duplizieren, herunterzuladen oder zu löschen. Löschst du die Website-Daten deines Browsers, sind sie weg - lade also herunter, was du behalten willst, oder lass den Editor sie an deinen eigenen Server senden («Auf Server speichern»).
Ja, jede KI - ChatGPT, Claude, Gemini, Copilot oder die KI in deinem Programmier-Tool. Klicke auf «KI-Assistent», dann auf «Prompt kopieren», füge ihn in deine KI ein und sag, was sie ändern soll. Die KI antwortet mit einem Link; klickst du ihn an, erscheinen die Daten in deinem Editor. «Rückgängig» nimmt jede Änderung zurück.
Nein. Der Editor ist kostenlos, ohne Werbung und ohne Anmeldung.