JSON Editor online
Code

Export

My documents

Click a document to open it. They are stored only in this browser - nothing is uploaded. Clearing the browser's site data removes them, so download the ones you want to keep.

AI Assistant

Any AI can work with you - ChatGPT, Claude, Gemini, Copilot.

  1. Click Copy prompt.
  2. Paste it into your AI and say what it should change.
The AI should

The document travels in the link after the “#”, which no server sees. What you paste into your AI is handled by its provider.

Save to your server

The editor can send each saved version to your own server (a webhook), so your work is kept where you want it. Nothing is sent until you enter an address here.

What your server receives

A POST request with JSON (your server must allow CORS from https://json.giit.ch); content is the document as a string:

{ "editor": "json", "event": "save", "id": "…", "name": "Settings",
  "content": "{\n  \"debug\": false\n}\n",
  "updated": "2026-01-15T09:30:00.000Z" }
Embed the editor in your website 
<iframe src="https://json.giit.ch/?embed=1" style="width:100%;height:80vh;border:0"></iframe>
<script>
const frame = document.querySelector('iframe');
addEventListener('message', e => {
  if (e.origin !== 'https://json.giit.ch' || e.source !== frame.contentWindow) return;
  if (e.data.type === 'jsoneditor:ready')
    frame.contentWindow.postMessage({ type: 'jsoneditor:load', name: 'Settings',
      content: JSON.stringify(settings, null, 2) }, 'https://json.giit.ch');
  if (e.data.type === 'jsoneditor:save') saveOnYourServer(e.data.content);
});
</script>

Also possible: ?src=<URL of a .json file> opens a file, &webhook=<URL> saves this document there. The editor can also open in a window of its own (?embed=window), and your page can hand it its own AI prompt and a session key so the AI sends its result to your server (jsoneditor:ai, jsoneditor:key-request) - see "Use the editor on your own website" below the editor. Details are in llms.txt.

Help

How it works

  1. Write JSON on the left - or start with New and one of the templates. The tree in the middle shows the data as you type: objects and arrays fold, every value shows its type, {3} and [5] count the entries.
  2. Click a key or a value in the tree to change it right there. Enter or a click elsewhere writes the change into the code at exactly that place (one step for Undo), Escape cancels. The buttons above the tree add, duplicate, move and remove entries and change the type of a value.
  3. A click in the tree puts the code's cursor on that value; the cursor in the code marks its value in the tree. The path of the selected value ($.items[3].name) is below the tree.
  4. Problems (a missing comma, a duplicate key, what does not fit the schema) are listed above the code with line and column - click one to go there.
  5. Value on the right shows the selected key and value; Insert adds entries and pieces of code; Convert formats the document or converts it to YAML, CSV or XML; Schema checks it against a JSON Schema from your documents.
  6. My documents (the folder button at the top left) lists every document kept in this browser. Export saves it as JSON, minified JSON, YAML, CSV or text.

Keyboard shortcuts

↑ ↓ ← →
In the tree: go up and down, fold and unfold
Enter
In the tree: change the value (F2: the key)
Delete
In the tree: remove the entry
Alt + ↑ / ↓
In the tree: move the entry up / down
Ctrl + F
Search keys and values in the tree
Ctrl + Shift + F
Format the document
Tab / Shift + Tab
Indent / outdent in the code
Ctrl + Z / Y
Undo / redo
Ctrl + S / E
Save (download, or to your server) / export
Ctrl + O
My documents

Quotes and brackets close by themselves around a selection; Enter after { or [ indents the next line.

Modifica JSON online, come codice e come albero

L'Editor JSON mostra il tuo codice JSON e i dati come albero uno accanto all'altro. Comprimi oggetti e array, vedi il tipo e il numero di voci di ogni valore, e cambia chiavi e valori direttamente nell'albero - la modifica va nel codice esattamente in quel punto, e il resto del file mantiene la sua formattazione. Gli errori sono elencati con riga e colonna, e i dati si possono verificare con uno JSON Schema e convertire in YAML, CSV o XML.

Tutto funziona nel tuo browser. I documenti non vengono caricati, non serve registrarsi e non c'è pubblicità.

Cosa sa fare l'editor

Codice e albero

JSON evidenziato a sinistra, l'albero comprimibile al centro. Un clic nell'albero salta al codice, il cursore del codice evidenzia il suo valore nell'albero, il percorso ($.items[3].name) è sempre visibile.

Modifica nell'albero

Cambia chiavi e valori, aggiungi, duplica, sposta e rimuovi voci, cambia un tipo - ciascuna come piccola modifica del codice, un passo per Annulla.

Errori facili da trovare

Una virgola o una virgoletta mancante, chiavi doppie e valori non conformi al tuo JSON Schema, ciascuno con riga e colonna. Vengono letti anche JSON con commenti e JSON5.

Ricerca

Cerca chiavi e valori; ogni risultato è evidenziato nell'albero, Invio passa al successivo.

Conversione

Formatta, minimizza e ordina le chiavi, o converti in YAML, CSV (un array di oggetti è una tabella) e XML. I file YAML, CSV e XML si aprono come JSON.

Molti documenti

Conserva quanti documenti vuoi nel tuo browser, ciascuno con la sua cronologia di annullamento, e scaricali tutti in uno ZIP.

Come funziona

  1. Inizia - scegli un modello in «Nuovo», apri un file .json o incolla JSON.
  2. Modifica - nel codice o nell'albero; entrambi mostrano sempre gli stessi dati.
  3. Verifica ed esporta - correggi i problemi elencati, scegli uno schema e scarica JSON, YAML, CSV o testo.

Usare l'editor sul tuo sito web

Qualsiasi pagina https (e localhost) può integrare l'editor con un <iframe> e ?embed=1 - senza registrazione, senza chiave. Integrato, l'editor nasconde questo testo e mostra un pulsante Salva. Ci sono due modi per far entrare e uscire il documento.

1. Aprire un file da un link, salvare sul tuo server

src= apre un file (il tuo server deve consentire CORS), webhook= fa sì che «Salva» (Ctrl+S) invii il documento a quell'indirizzo. Aggiungi &token=… per un'intestazione Authorization: Bearer … e &auto per salvare dopo ogni modifica.

<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>

Il webhook riceve un POST con JSON { editor: "json", event: "save", id, name, content, updated }; content è il documento come stringa. Un piccolo script PHP che lo salva:

<?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}';

2. La tua pagina custodisce il documento (postMessage)

L'editor dice jsoneditor:ready, la tua pagina risponde con jsoneditor:load, l'editor segnala jsoneditor:loaded, jsoneditor:change alle modifiche reali e jsoneditor:save quando l'utente salva. La tua pagina può inviare jsoneditor:get (lo stato attuale) o jsoneditor:save (premi Salva). Il salvataggio passa così dal tuo login e dalla tua sessione.

<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') {              // l'editor è pronto: passagli il documento
    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';   // una modifica reale
  if (m.type === 'jsoneditor:save') {               // l'utente ha fatto clic su "Salva"
    await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: m.name, content: m.content }) });
    document.title = 'Saved';
  }
});

// Un pulsante Salva sulla tua pagina: la risposta arriva come jsoneditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'jsoneditor:get' }, ORIGIN); }
</script>

Assistente IA nella tua pagina: funziona anche nel riquadro. Con allow="clipboard-write" sull'iframe, «Copia il prompt» usa direttamente gli appunti (altrimenti l'editor ricorre al vecchio comando di copia, o mostra il prompt da copiare a mano). Un link inviato dall'IA non può raggiungere un editor dentro un altro sito web, quindi l'editor dice all'IA e all'utente di incollare invece l'intera risposta dell'IA nell'editor - oppure di aprire l'editor in una finestra propria.

3. In una finestra propria

window.open("https://json.giit.ch/?embed=window", "jsoneditor-17") apre l'editor completo in una finestra propria e usa gli stessi messaggi con window.opener. Lì lo raggiungono i link di un'IA. jsoneditor:load può portare anche context: { host, title, rules } - il prompt per l'IA dice allora a chi appartiene il documento e segue le tue regole - e hook: { url, token }, un webhook solo per questo documento che non viene mai salvato. Chiudere la finestra con modifiche non salvate invia jsoneditor:closing.

4. IA tramite il tuo server

Passa all'editor il tuo prompt, un indirizzo sul tuo sito e una chiave per questa sessione dell'editor. La finestra dell'IA mostra allora «Connesso a» il tuo sito, ciò che dici all'IA e la scelta modificare il documento attuale o crearne uno nuovo; Copia il prompt mette tutto insieme. L'IA invia il risultato con la chiave al tuo server, e la tua pagina lo apre nell'editor - un nuovo documento si apre separatamente e resta nel browser dell'utente. Una chiave per sessione dell'editor: resta valida finché l'editor è aperto, e solo finché non ne ha una l'editor la chiede con jsoneditor:key-request. L'editor non invia mai la chiave di sua iniziativa e non la salva mai; l'indirizzo deve essere https sul tuo host o su un suo sottodominio.

const key = async () => (await fetch('/api/ai-key.php?doc=17')).json();   // una chiave per sessione dell'editor
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);
// ricorda l'id da jsoneditor:loaded e ignora change/save/closing con un altro id
// solo finché l'editor non ha una chiave:
if (m.type === 'jsoneditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'jsoneditor:ai', key: k.key }, ORIGIN); }
// finché l'editor è aperto, avvisa il tuo server ogni minuto; chiudere l'editor o la pagina annulla la chiave
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// il tuo server ha un risultato (polling, SSE …): target è "current" o "new"
ed.contentWindow.postMessage({ type: 'jsoneditor:load', name: 'Settings', content: draft, from: 'ai', target }, ORIGIN);

Crea chiavi con almeno 128 bit casuali, salvane solo l'hash, lega ciascuna all'utente connesso, al documento e a questa sessione dell'editor, creane una per sessione, mantienila valida solo finché la tua pagina segnala la sessione come aperta, e annullala quando l'editor o la pagina si chiude.

L'intero protocollo è in llms.txt - dallo a un'IA e costruirà il collegamento per il tuo sistema. L'Editor YAML funziona allo stesso modo con il prefisso yamleditor: - yaml.giit.ch.

Domande frequenti

I miei dati vengono caricati?

No. L'editor funziona interamente nel tuo browser. I tuoi documenti non vengono mai inviati a un server, a meno che tu stesso non configuri un webhook verso il tuo server.

Posso modificare i dati nell'albero?

Sì. Fai clic su una chiave o un valore nell'albero, scrivi e premi Invio. La modifica viene scritta nel codice esattamente in quel punto - il resto mantiene la sua formattazione - e Annulla la ritira. I pulsanti sopra l'albero aggiungono, duplicano, spostano e rimuovono voci e cambiano il tipo di un valore.

Legge JSON con commenti o JSON5?

Sì. Commenti, virgole finali, virgolette singole e chiavi senza virgolette vengono letti e mostrati nell'albero, con una nota che non sono JSON puro. «Formatta» scrive JSON puro.

Come verifico il mio JSON con uno schema?

Apri o incolla lo JSON Schema come secondo documento, poi sceglilo nella scheda Schema. Ogni punto non conforme è elencato con riga e colonna. L'editor non scarica mai uno schema da internet - un indirizzo $schema nel documento viene solo mostrato.

Può convertire JSON in YAML, CSV o XML?

Sì, nella scheda Converti o in Esporta. CSV richiede un array di oggetti - ogni oggetto è una riga. I file YAML, CSV e XML che apri vengono convertiti in JSON.

Dove vengono salvati i miei documenti?

Solo nel tuo browser. Fai clic sul pulsante a forma di cartella in alto a sinistra (I miei documenti) per aprirli, rinominarli, duplicarli, scaricarli o eliminarli. Cancellando i dati del sito nel browser spariscono, quindi scarica quelli che vuoi conservare - oppure lascia che l'editor li invii al tuo server («Salva sul server»).

Un'IA può scrivere nell'Editor JSON?

Sì, qualsiasi IA - ChatGPT, Claude, Gemini, Copilot o l'IA del tuo strumento di programmazione. Fai clic su «Assistente IA», poi su «Copia il prompt», incollalo nella tua IA e dille cosa deve cambiare. L'IA risponde con un link; fai clic su di esso e i dati appaiono nel tuo editor. «Annulla» ritira ogni modifica.

L'Editor JSON costa qualcosa?

No. L'editor è gratuito, senza pubblicità e senza registrazione.