Code
The JSON Editor shows your JSON code and the data as a tree side by side. Fold objects and arrays, see the type and the number of entries of every value, and change keys and values right in the tree - the change goes into the code at exactly that place, and the rest of the file keeps its formatting. Errors are listed with line and column, and the data can be checked against a JSON Schema and converted to YAML, CSV or XML.
Everything runs in your browser. Documents are not uploaded, there is no sign-up and no advertising.
Highlighted JSON on the left, the foldable tree in the middle. A click in the tree jumps to the code, the code cursor marks its value in the tree, the path ($.items[3].name) is always shown.
Change keys and values, add, duplicate, move and remove entries, change a type - each as a small edit of the code, one step for Undo.
A missing comma or quote, duplicate keys and values that do not fit your JSON Schema, each with its line and column. JSON with comments and JSON5 are read too.
Search keys and values; every match is marked in the tree, Enter goes to the next one.
Format, minify and sort keys, or convert to YAML, CSV (an array of objects is a table) and XML. YAML, CSV and XML files open as JSON.
Keep any number of documents in your browser, with their own undo history, and download them all as a ZIP.
Any https page (and localhost) can embed the editor with an <iframe> and ?embed=1 - no sign-up, no key. Embedded, the editor hides this text and shows a Save button. There are two ways to get the document in and out.
src= opens a file (your server must allow CORS), webhook= makes "Save" (Ctrl+S) send the document to that address. Add &token=… for an Authorization: Bearer … header and &auto to save after every change.
<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>The webhook gets a POST with JSON { editor: "json", event: "save", id, name, content, updated }; content is the document as a string. A small PHP script that stores it:
<?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}';The editor says jsoneditor:ready, your page answers with jsoneditor:load, the editor reports jsoneditor:loaded, jsoneditor:change on real edits and jsoneditor:save when the user saves. Your page may send jsoneditor:get (the current state) or jsoneditor:save (press Save). Saving then goes through your own login and session.
<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') { // the editor is ready: hand it the 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'; // a real edit
if (m.type === 'jsoneditor:save') { // the user clicked "Save"
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content }) });
document.title = 'Saved';
}
});
// A save button on your own page: the answer comes as jsoneditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'jsoneditor:get' }, ORIGIN); }
</script>AI Assistant inside your page: it works in the frame too. With allow="clipboard-write" on the iframe, "Copy prompt" uses the clipboard directly (otherwise the editor falls back to the old copy command, or shows the prompt to copy by hand). A link the AI sends cannot reach an editor inside another website, so the editor tells the AI and the user to paste the AI's whole answer into the editor instead - or open the editor in a window of its own.
window.open("https://json.giit.ch/?embed=window", "jsoneditor-17") opens the full editor in its own window and speaks the same messages with window.opener. Links from an AI reach it there. jsoneditor:load may also carry context: { host, title, rules } - the AI prompt then says where the document belongs and follows your rules - and hook: { url, token }, a webhook for this document only that is never stored. Closing the window with unsaved changes sends jsoneditor:closing.
Hand the editor your own prompt, an address on your site and a key for this editor session. The AI dialog then shows "Connected to" your site, what you tell the AI, and the choice change the current document or make a new one; Copy prompt puts it all together. The AI posts its result with the key to your server, and your page opens it in the editor - a new document opens separately and stays in the user's browser. One key per editor session: it stays valid while the editor is open, and only while it has none the editor asks for it with jsoneditor:key-request. The editor never sends the key itself and never stores it; the address must be https on your own host or a subdomain of it.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // one key per editor session
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);
// remember the id from jsoneditor:loaded and ignore change/save/closing with another id
// only while the editor has no key:
if (m.type === 'jsoneditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'jsoneditor:ai', key: k.key }, ORIGIN); }
// while the editor is open, tell your server every minute; closing the editor or the page voids the key
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// your server has a result (polling, SSE …): target is "current" or "new"
ed.contentWindow.postMessage({ type: 'jsoneditor:load', name: 'Settings', content: draft, from: 'ai', target }, ORIGIN);Make keys with at least 128 random bits, store only their hash, bind each to the logged-in user, the document and this editor session, make one per session, keep it valid only while your page reports the session as open, and void it when the editor or the page closes.
The whole protocol is in llms.txt - give it to an AI and it builds the connection for your system. The YAML Editor works the same way with the prefix yamleditor: - yaml.giit.ch.
No. The editor runs entirely in your browser. Your documents are never sent to a server, unless you set up a webhook to your own server yourself.
Yes. Click a key or a value in the tree, type, and press Enter. The change is written into the code at exactly that place - the rest keeps its formatting - and Undo takes it back. The buttons above the tree add, duplicate, move and remove entries and change the type of a value.
Yes. Comments, trailing commas, single quotes and keys without quotes are read and shown in the tree, with a note that they are not plain JSON. "Format" writes plain JSON.
Open or paste the JSON Schema as a second document, then choose it in the Schema tab. Every place that does not fit is listed with its line and column. The editor never downloads a schema from the internet - a $schema address in the document is only shown.
Yes, in the Convert tab or under Export. CSV needs an array of objects - each object is a row. YAML, CSV and XML files you open are converted to JSON.
Only in your browser. Click the folder button at the top left (My documents) to open, rename, duplicate, download or delete them. Clearing your browser's site data removes them, so download the ones you want to keep - or let the editor send them to your own server ("Save to server").
Yes, any AI - ChatGPT, Claude, Gemini, Copilot or the AI in your coding tool. Click "AI Assistant", then "Copy prompt", paste it into your AI and say what it should change. The AI answers with a link; click it and the data appears in your editor. "Undo" takes every change back.
No. The editor is free, without ads and without sign-up.