YAML 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://yaml.giit.ch); content is the document as a string:

{ "editor": "yaml", "event": "save", "id": "…", "name": "Settings",
  "content": "debug: false\nport: 8080\n",
  "updated": "2026-01-15T09:30:00.000Z" }
Embed the editor in your website 
<iframe src="https://yaml.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://yaml.giit.ch' || e.source !== frame.contentWindow) return;
  if (e.data.type === 'yamleditor:ready')
    frame.contentWindow.postMessage({ type: 'yamleditor:load', name: 'Settings',
      content: settingsYaml }, 'https://yaml.giit.ch');
  if (e.data.type === 'yamleditor:save') saveOnYourServer(e.data.content);
});
</script>

Also possible: ?src=<URL of a .yaml 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 (yamleditor:ai, yamleditor:key-request) - see "Use the editor on your own website" below the editor. Details are in llms.txt.

Help

How it works

  1. Write YAML on the left - or start with New and one of the templates. The tree in the middle shows the data as you type: mappings and lists fold, every value shows its type, {3} and [5] count the entries, every document after --- has its own tree.
  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 - comments and formatting stay (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. Anchors (&name) and aliases (*name) are marked.
  4. Problems (wrong indentation, a tab, a duplicate key, an alias without its anchor, 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 JSON, 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 YAML, JSON, 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 (with spaces)
Ctrl + /
Comment lines in or out (#)
Ctrl + Z / Y
Undo / redo
Ctrl + S / E
Save (download, or to your server) / export
Ctrl + O
My documents

Enter after key: indents the next line, Enter in a list starts the next item with - . Quotes and brackets close by themselves around a selection.

Modifica YAML online, come codice e come albero

L'Editor YAML mostra il tuo codice YAML e i dati come albero uno accanto all'altro. Comprimi mappe e liste, 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 i tuoi commenti e la formattazione restano. Gli errori sono elencati con riga e colonna, da un rientro sbagliato a una tabulazione o un alias senza la sua ancora, e i dati si possono verificare con uno JSON Schema e convertire in JSON, 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

YAML 1.2 evidenziato a sinistra, l'albero comprimibile al centro - un albero per ogni documento dopo ---. Un clic nell'albero salta al codice, il cursore del codice evidenzia il suo valore nell'albero.

Modifica nell'albero, mantieni i commenti

Cambia chiavi e valori, aggiungi, duplica, sposta e rimuovi voci, cambia un tipo - ciascuna come piccola modifica del codice, così commenti e righe vuote restano dove sono.

Errori facili da trovare

Rientro sbagliato, tabulazioni, chiavi doppie, alias senza la loro ancora e valori non conformi al tuo JSON Schema, ciascuno con riga e colonna.

Ancore e alias

&anchor, *alias e le chiavi di unione (<<) sono contrassegnati nell'albero e risolti per le conversioni.

Conversione

Formatta con un rientro coerente, o converti in JSON, CSV (una lista di mappe è una tabella) e XML. I file JSON, CSV e XML si aprono come YAML.

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» (Docker Compose, un workflow GitHub, Kubernetes, OpenAPI), apri un file .yaml o incolla YAML.
  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 YAML, JSON, 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://yaml.giit.ch/?embed=1&src=https://your-site.com/config/app.yaml&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: "yaml", 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://yaml.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.yaml", $d['content']);
echo '{"ok":true}';

2. La tua pagina custodisce il documento (postMessage)

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

<iframe id="ed" src="https://yaml.giit.ch/?embed=1" allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>
<script>
const ed = document.getElementById('ed');
const ORIGIN = 'https://yaml.giit.ch';

addEventListener('message', async e => {
  if (e.source !== ed.contentWindow || e.origin !== ORIGIN) return;
  const m = e.data;
  if (m.type === 'yamleditor:ready') {              // l'editor è pronto: passagli il documento
    ed.contentWindow.postMessage({
      type: 'yamleditor:load',
      name: 'Settings',
      content: await (await fetch('/config/app.yaml')).text()
    }, ORIGIN);
  }
  if (m.type === 'yamleditor:change') document.title = '● not saved';   // una modifica reale
  if (m.type === 'yamleditor: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 yamleditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'yamleditor: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://yaml.giit.ch/?embed=window", "yamleditor-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. yamleditor: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 yamleditor: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 yamleditor: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: 'yamleditor:load', name: 'Settings', content, ai: {
  label: 'My Site', prompt: 'Keep every key and every comment.',
  endpoint: 'https://your-site.com/api/ai-result.php', key: k.key } }, ORIGIN);
// ricorda l'id da yamleditor:loaded e ignora change/save/closing con un altro id
// solo finché l'editor non ha una chiave:
if (m.type === 'yamleditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'yamleditor: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: 'yamleditor: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 JSON funziona allo stesso modo con il prefisso jsoneditor: - json.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.

I miei commenti restano quando modifico nell'albero?

Sì. Una modifica nell'albero viene scritta nel codice esattamente in quel punto; commenti, righe vuote e il resto della formattazione restano come sono. Annulla ritira ogni modifica.

Perché l'editor segnala le tabulazioni?

YAML non consente tabulazioni per il rientro. L'editor segnala ogni punto, e il tasto Tab nel codice inserisce spazi.

Capisce ancore, alias e più documenti?

Sì. Ancore (&name) e alias (*name) sono contrassegnati nell'albero, le chiavi di unione (<<) vengono risolte per le conversioni, un alias senza la sua ancora viene segnalato, e ogni documento dopo --- ha il suo albero.

Può convertire YAML in JSON, CSV o XML?

Sì, nella scheda Converti o in Esporta. Una lista di mappe diventa una tabella CSV. I file JSON, CSV e XML che apri vengono convertiti in YAML.

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

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 YAML costa qualcosa?

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