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.

YAML online bearbeiten, als Code und als Baum

Der YAML-Editor zeigt deinen YAML-Code und die Daten als Baum nebeneinander. Klappe Mappings und Listen 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 deine Kommentare und Formatierung bleiben. Fehler werden mit Zeile und Spalte aufgelistet, von falscher Einrückung bis zu einem Tab oder einem Alias ohne seinen Anker, und die Daten lassen sich gegen ein JSON Schema prüfen und in JSON, CSV oder XML umwandeln.

Alles läuft in deinem Browser. Dokumente werden nicht hochgeladen, es gibt keine Anmeldung und keine Werbung.

Was der Editor kann

Code und Baum

Hervorgehobenes YAML 1.2 links, der aufklappbare Baum in der Mitte - ein Baum pro Dokument nach ---. Ein Klick in den Baum springt zum Code, der Cursor im Code markiert seinen Wert im Baum.

Im Baum bearbeiten, Kommentare behalten

Schlüssel und Werte ändern, Einträge hinzufügen, duplizieren, verschieben und entfernen, einen Typ ändern - jeweils als kleine Änderung des Codes, so bleiben Kommentare und Leerzeilen, wo sie sind.

Fehler, die du findest

Falsche Einrückung, Tabs, doppelte Schlüssel, Aliase ohne ihren Anker und Werte, die nicht zu deinem JSON Schema passen, jeweils mit Zeile und Spalte.

Anker und Aliase

&anchor, *alias und Merge-Keys (<<) werden im Baum markiert und für Umwandlungen aufgelöst.

Umwandeln

Mit einheitlicher Einrückung formatieren, oder in JSON, CSV (eine Liste von Mappings ist eine Tabelle) und XML umwandeln. JSON-, CSV- und XML-Dateien öffnen sich als YAML.

Viele Dokumente

Behalte beliebig viele Dokumente in deinem Browser, jedes mit eigenem Rückgängig-Verlauf, und lade sie alle als ZIP herunter.

So funktioniert es

  1. Starten - wähle unter «Neu» eine Vorlage (Docker Compose, ein GitHub-Workflow, Kubernetes, OpenAPI), öffne eine .yaml-Datei oder füge YAML ein.
  2. Bearbeiten - im Code oder im Baum; beide zeigen immer dieselben Daten.
  3. Prüfen und exportieren - behebe die aufgelisteten Probleme, wähle ein Schema und lade YAML, JSON, CSV oder Text herunter.

Den Editor auf deiner eigenen Website nutzen

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.

1. Eine Datei über einen Link öffnen, auf deinem Server speichern

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

Der Webhook erhält einen POST mit JSON { editor: "yaml", 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://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. Deine Seite hält das Dokument (postMessage)

Der Editor meldet yamleditor:ready, deine Seite antwortet mit yamleditor:load, der Editor meldet yamleditor:loaded, yamleditor:change bei echten Änderungen und yamleditor:save, wenn gespeichert wird. Deine Seite kann yamleditor:get (den aktuellen Stand) oder yamleditor:save (Speichern drücken) senden. Gespeichert wird dann über dein eigenes Login und deine eigene Sitzung.

<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') {              // der Editor ist bereit: ihm das Dokument geben
    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';   // eine echte Änderung
  if (m.type === 'yamleditor: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 yamleditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'yamleditor: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.

3. In einem eigenen Fenster

window.open("https://yaml.giit.ch/?embed=window", "yamleditor-17") öffnet den vollen Editor in einem eigenen Fenster, das dieselben Meldungen mit window.opener austauscht. Links einer KI erreichen ihn dort. yamleditor: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 yamleditor:closing.

4. KI über deinen eigenen Server

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 yamleditor: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: '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);
// die id aus yamleditor:loaded merken und change/save/closing mit anderer id ignorieren
// nur solange der Editor keinen Schlüssel hat:
if (m.type === 'yamleditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'yamleditor: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: 'yamleditor: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 JSON-Editor funktioniert gleich, mit dem Präfix jsoneditor: - json.giit.ch.

Häufige Fragen

Werden meine Daten hochgeladen?

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.

Bleiben meine Kommentare erhalten, wenn ich im Baum bearbeite?

Ja. Eine Änderung im Baum wird genau an dieser Stelle in den Code geschrieben; Kommentare, Leerzeilen und die übrige Formatierung bleiben, wie sie sind. «Rückgängig» nimmt jede Änderung zurück.

Warum beanstandet der Editor Tabs?

YAML erlaubt keine Tabs zum Einrücken. Der Editor markiert jede solche Stelle, und die Tab-Taste fügt im Code Leerzeichen ein.

Versteht er Anker, Aliase und mehrere Dokumente?

Ja. Anker (&name) und Aliase (*name) werden im Baum markiert, Merge-Keys (<<) für Umwandlungen aufgelöst, ein Alias ohne seinen Anker wird gemeldet, und jedes Dokument nach --- erhält seinen eigenen Baum.

Kann er YAML in JSON, CSV oder XML umwandeln?

Ja, im Tab Umwandeln oder unter «Exportieren». Eine Liste von Mappings wird zu einer CSV-Tabelle. JSON-, CSV- und XML-Dateien, die du öffnest, werden in YAML umgewandelt.

Wo werden meine Dokumente gespeichert?

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»).

Kann eine KI im YAML-Editor schreiben?

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.

Kostet der YAML-Editor etwas?

Nein. Der Editor ist kostenlos, ohne Werbung und ohne Anmeldung.