Code
De JSON-editor toont je JSON-code en de gegevens als boom naast elkaar. Vouw objecten en arrays in, zie het type en het aantal items van elke waarde, en wijzig sleutels en waarden direct in de boom - de wijziging gaat precies op die plek in de code, en de rest van het bestand behoudt zijn opmaak. Fouten staan in een lijst met regel en kolom, en de gegevens kunnen worden gecontroleerd aan de hand van een JSON Schema en omgezet naar YAML, CSV of XML.
Alles draait in je browser. Documenten worden niet geüpload, er is geen registratie en geen reclame.
Gekleurde JSON links, de inklapbare boom in het midden. Een klik in de boom springt naar de code, de cursor van de code markeert zijn waarde in de boom, het pad ($.items[3].name) wordt altijd getoond.
Sleutels en waarden wijzigen, items toevoegen, dupliceren, verplaatsen en verwijderen, een type wijzigen - telkens als kleine bewerking van de code, één stap voor Ongedaan maken.
Een ontbrekende komma of een ontbrekend aanhalingsteken, dubbele sleutels en waarden die niet bij je JSON Schema passen, elk met regel en kolom. JSON met commentaar en JSON5 worden ook gelezen.
Zoek sleutels en waarden; elke treffer wordt in de boom gemarkeerd, Enter gaat naar de volgende.
Opmaken, minificeren en sleutels sorteren, of omzetten naar YAML, CSV (een array van objecten is een tabel) en XML. YAML-, CSV- en XML-bestanden openen als JSON.
Bewaar zoveel documenten als je wilt in je browser, elk met een eigen geschiedenis voor Ongedaan maken, en download ze allemaal als ZIP.
Elke https-pagina (en localhost) kan de editor insluiten met een <iframe> en ?embed=1 - geen registratie, geen sleutel. Ingesloten verbergt de editor deze tekst en toont hij een knop Opslaan. Er zijn twee manieren om het document erin en eruit te krijgen.
src= opent een bestand (je server moet CORS toestaan), webhook= zorgt dat "Opslaan" (Ctrl+S) het document naar dat adres stuurt. Voeg &token=… toe voor een header Authorization: Bearer … en &auto om na elke wijziging op te slaan.
<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>De webhook krijgt een POST met JSON { editor: "json", event: "save", id, name, content, updated }; content is het document als tekst. Een klein PHP-script dat het opslaat:
<?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}';De editor zegt jsoneditor:ready, je pagina antwoordt met jsoneditor:load, de editor meldt jsoneditor:loaded, jsoneditor:change bij echte bewerkingen en jsoneditor:save wanneer de gebruiker opslaat. Je pagina mag jsoneditor:get (de huidige toestand) of jsoneditor:save (op Opslaan drukken) sturen. Opslaan loopt dan via je eigen login en sessie.
<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') { // de editor is klaar: geef hem het document
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'; // een echte bewerking
if (m.type === 'jsoneditor:save') { // de gebruiker klikte op "Opslaan"
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content }) });
document.title = 'Saved';
}
});
// Een opslaanknop op je eigen pagina: het antwoord komt als jsoneditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'jsoneditor:get' }, ORIGIN); }
</script>AI-assistent binnen je pagina: die werkt ook in het frame. Met allow="clipboard-write" op het iframe gebruikt "Prompt kopiëren" direct het klembord (anders valt de editor terug op het oude kopieercommando, of toont hij de prompt om met de hand te kopiëren). Een link die de AI stuurt, kan een editor binnen een andere website niet bereiken, dus vraagt de editor de AI en de gebruiker om in plaats daarvan het hele antwoord van de AI in de editor te plakken - of de editor in een eigen venster te openen.
window.open("https://json.giit.ch/?embed=window", "jsoneditor-17") opent de volledige editor in een eigen venster en spreekt dezelfde berichten met window.opener. Links van een AI bereiken hem daar. jsoneditor:load kan ook context: { host, title, rules } meegeven - de AI-prompt zegt dan waar het document thuishoort en volgt je regels - en hook: { url, token }, een webhook alleen voor dit document die nooit wordt opgeslagen. Als het venster met niet-opgeslagen wijzigingen wordt gesloten, stuurt het jsoneditor:closing.
Geef de editor je eigen prompt, een adres op je site en een sleutel voor deze editorsessie. Het AI-venster toont dan "Verbonden met" je site, wat je de AI vertelt, en de keuze het huidige document wijzigen of een nieuw maken; Prompt kopiëren zet alles bij elkaar. De AI post het resultaat met de sleutel naar je server, en je pagina opent het in de editor - een nieuw document opent apart en blijft in de browser van de gebruiker. Eén sleutel per editorsessie: hij blijft geldig zolang de editor open is, en alleen zolang de editor er geen heeft, vraagt hij erom met jsoneditor:key-request. De editor verstuurt de sleutel nooit zelf en slaat hem nooit op; het adres moet https zijn op je eigen host of een subdomein ervan.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // één sleutel per editorsessie
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);
// onthoud de id uit jsoneditor:loaded en negeer change/save/closing met een andere id
// alleen zolang de editor geen sleutel heeft:
if (m.type === 'jsoneditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'jsoneditor:ai', key: k.key }, ORIGIN); }
// zolang de editor open is, meld het elke minuut aan je server; het sluiten van de editor of de pagina maakt de sleutel ongeldig
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// je server heeft een resultaat (polling, SSE …): target is "current" of "new"
ed.contentWindow.postMessage({ type: 'jsoneditor:load', name: 'Settings', content: draft, from: 'ai', target }, ORIGIN);Maak sleutels met minstens 128 willekeurige bits, sla alleen hun hash op, koppel elke sleutel aan de ingelogde gebruiker, het document en deze editorsessie, maak er één per sessie, houd hem alleen geldig zolang je pagina de sessie als open meldt, en maak hem ongeldig wanneer de editor of de pagina sluit.
Het hele protocol staat in llms.txt - geef het aan een AI en die bouwt de koppeling voor je systeem. De YAML-editor werkt op dezelfde manier met het voorvoegsel yamleditor: - yaml.giit.ch.
Nee. De editor draait volledig in je browser. Je documenten worden nooit naar een server gestuurd, tenzij je zelf een webhook naar je eigen server instelt.
Ja. Klik op een sleutel of waarde in de boom, typ en druk op Enter. De wijziging wordt precies op die plek in de code geschreven - de rest behoudt zijn opmaak - en Ongedaan maken draait haar terug. De knoppen boven de boom voegen items toe, dupliceren, verplaatsen en verwijderen ze en wijzigen het type van een waarde.
Ja. Commentaar, komma's na het laatste item, enkele aanhalingstekens en sleutels zonder aanhalingstekens worden gelezen en in de boom getoond, met een opmerking dat ze geen gewone JSON zijn. "Opmaken" schrijft gewone JSON.
Open of plak het JSON Schema als tweede document en kies het dan in het tabblad Schema. Elke plek die niet past, staat in een lijst met regel en kolom. De editor downloadt nooit een schema van internet - een $schema-adres in het document wordt alleen getoond.
Ja, in het tabblad Omzetten of onder Exporteren. CSV heeft een array van objecten nodig - elk object is een rij. YAML-, CSV- en XML-bestanden die je opent, worden omgezet naar JSON.
Alleen in je browser. Klik op de mapknop linksboven (Mijn documenten) om ze te openen, te hernoemen, te dupliceren, te downloaden of te verwijderen. Als je de sitegegevens van je browser wist, verdwijnen ze, dus download de documenten die je wilt bewaren - of laat de editor ze naar je eigen server sturen ("Opslaan op server").
Ja, elke AI - ChatGPT, Claude, Gemini, Copilot of de AI in je programmeertool. Klik op "AI-assistent", dan op "Prompt kopiëren", plak hem in je AI en zeg wat die moet wijzigen. De AI antwoordt met een link; klik erop en de gegevens verschijnen in je editor. "Ongedaan maken" draait elke wijziging terug.
Nee. De editor is gratis, zonder reclame en zonder registratie.