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.

Edytuj YAML online jako kod i jako drzewo

Edytor YAML pokazuje kod YAML i dane jako drzewo obok siebie. Zwijaj mapowania i listy, oglądaj typ i liczbę wpisów każdej wartości i zmieniaj klucze i wartości bezpośrednio w drzewie - zmiana trafia do kodu dokładnie w tym miejscu, a twoje komentarze i formatowanie zostają. Błędy są wymienione z wierszem i kolumną, od złego wcięcia po tabulator czy alias bez kotwicy, a dane można sprawdzić względem JSON Schema i przekształcić w JSON, CSV lub XML.

Wszystko działa w przeglądarce. Dokumenty nie są nigdzie wysyłane, nie ma rejestracji ani reklam.

Co potrafi edytor

Kod i drzewo

Podświetlony YAML 1.2 po lewej, zwijane drzewo pośrodku - jedno drzewo na każdy dokument po ---. Kliknięcie w drzewie przenosi do kodu, kursor kodu zaznacza swoją wartość w drzewie.

Edycja w drzewie z zachowaniem komentarzy

Zmieniaj klucze i wartości, dodawaj, duplikuj, przesuwaj i usuwaj wpisy, zmieniaj typ - każda zmiana to mała edycja kodu, więc komentarze i puste wiersze zostają na swoim miejscu.

Błędy, które łatwo znaleźć

Złe wcięcia, tabulatory, powtórzone klucze, aliasy bez kotwicy i wartości niezgodne z twoim JSON Schema, każdy z wierszem i kolumną.

Kotwice i aliasy

&anchor, *alias i klucze scalające (<<) są oznaczone w drzewie i rozwiązywane przy konwersji.

Konwersja

Formatuj ze spójnymi wcięciami albo konwertuj do JSON, CSV (lista mapowań to tabela) i XML. Pliki JSON, CSV i XML otwierają się jako YAML.

Wiele dokumentów

Przechowuj w przeglądarce dowolną liczbę dokumentów, każdy z własną historią cofania, i pobierz je wszystkie jako ZIP.

Jak to działa

  1. Start - wybierz szablon w menu „Nowy” (Docker Compose, workflow GitHub, Kubernetes, OpenAPI), otwórz plik .yaml lub wklej YAML.
  2. Edycja - w kodzie lub w drzewie; oba zawsze pokazują te same dane.
  3. Sprawdzenie i eksport - popraw wymienione problemy, wybierz schemat i pobierz YAML, JSON, CSV lub tekst.

Edytor na własnej stronie

Każda strona https (i localhost) może osadzić edytor za pomocą <iframe> i ?embed=1 - bez rejestracji, bez klucza. Po osadzeniu edytor ukrywa ten tekst i pokazuje przycisk Zapisz. Dokument można przekazywać do edytora i z niego na dwa sposoby.

1. Otwieranie pliku z linku, zapis na twoim serwerze

src= otwiera plik (twój serwer musi zezwalać na CORS), webhook= sprawia, że „Zapisz” (Ctrl+S) wysyła dokument pod ten adres. Dodaj &token=…, aby wysyłać nagłówek Authorization: Bearer …, i &auto, aby zapisywać po każdej zmianie.

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

Webhook otrzymuje żądanie POST z JSON { editor: "yaml", event: "save", id, name, content, updated }; content to dokument jako tekst. Mały skrypt PHP, który go zapisuje:

<?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. Dokument przechowuje twoja strona (postMessage)

Edytor zgłasza yamleditor:ready, twoja strona odpowiada yamleditor:load, edytor zgłasza yamleditor:loaded, yamleditor:change przy rzeczywistych zmianach i yamleditor:save, gdy użytkownik zapisuje. Twoja strona może wysłać yamleditor:get (bieżący stan) lub yamleditor:save (naciśnięcie Zapisz). Zapis odbywa się wtedy przez twoje własne logowanie i sesję.

<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') {              // edytor jest gotowy: przekaż mu dokument
    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';   // rzeczywista zmiana
  if (m.type === 'yamleditor:save') {               // użytkownik kliknął „Zapisz”
    await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: m.name, content: m.content }) });
    document.title = 'Saved';
  }
});

// Przycisk zapisu na twojej stronie: odpowiedź przychodzi jako yamleditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'yamleditor:get' }, ORIGIN); }
</script>

Asystent AI na twojej stronie: działa także w ramce. Z allow="clipboard-write" w iframe „Kopiuj prompt” korzysta bezpośrednio ze schowka (w przeciwnym razie edytor używa starego polecenia kopiowania albo pokazuje prompt do ręcznego skopiowania). Link wysłany przez AI nie dotrze do edytora osadzonego w innej stronie, więc edytor prosi AI i użytkownika o wklejenie całej odpowiedzi AI do edytora - albo o otwarcie edytora we własnym oknie.

3. We własnym oknie

window.open("https://yaml.giit.ch/?embed=window", "yamleditor-17") otwiera pełny edytor we własnym oknie, który wymienia te same wiadomości z window.opener. Linki od AI docierają do niego tam. yamleditor:load może też zawierać context: { host, title, rules } - prompt dla AI mówi wtedy, gdzie należy dokument, i stosuje twoje zasady - oraz hook: { url, token }, webhook tylko dla tego dokumentu, który nigdy nie jest zapisywany. Zamknięcie okna z niezapisanymi zmianami wysyła yamleditor:closing.

4. AI przez twój własny serwer

Przekaż edytorowi własny prompt, adres w twojej witrynie i klucz dla tej sesji edytora. Okno AI pokazuje wtedy „Połączono z” twoją witryną, to, co przekazujesz AI, oraz wybór: zmienić bieżący dokument lub utworzyć nowy; Kopiuj prompt łączy to wszystko. AI wysyła swój wynik z kluczem na twój serwer, a twoja strona otwiera go w edytorze - nowy dokument otwiera się osobno i zostaje w przeglądarce użytkownika. Jeden klucz na sesję edytora: pozostaje ważny, dopóki edytor jest otwarty, a edytor prosi o niego przez yamleditor:key-request tylko wtedy, gdy go nie ma. Edytor nigdy sam nie wysyła klucza i nigdy go nie zapisuje; adres musi być adresem https na twoim własnym hoście lub jego subdomenie.

const key = async () => (await fetch('/api/ai-key.php?doc=17')).json();   // jeden klucz na sesję edytora
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);
// zapamiętaj id z yamleditor:loaded i ignoruj change/save/closing z innym id
// tylko gdy edytor nie ma klucza:
if (m.type === 'yamleditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'yamleditor:ai', key: k.key }, ORIGIN); }
// dopóki edytor jest otwarty, informuj serwer co minutę; zamknięcie edytora lub strony unieważnia klucz
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// twój serwer ma wynik (polling, SSE …): target to "current" lub "new"
ed.contentWindow.postMessage({ type: 'yamleditor:load', name: 'Settings', content: draft, from: 'ai', target }, ORIGIN);

Twórz klucze z co najmniej 128 losowymi bitami, przechowuj tylko ich hash, wiąż każdy z zalogowanym użytkownikiem, dokumentem i tą sesją edytora, twórz jeden na sesję, utrzymuj go ważnym tylko wtedy, gdy twoja strona zgłasza sesję jako otwartą, i unieważniaj go, gdy edytor lub strona zostaną zamknięte.

Cały protokół jest opisany w llms.txt - przekaż go AI, a zbuduje połączenie dla twojego systemu. Edytor JSON działa tak samo z prefiksem jsoneditor: - json.giit.ch.

Najczęstsze pytania

Czy moje dane są gdzieś wysyłane?

Nie. Edytor działa w całości w przeglądarce. Dokumenty nigdy nie są wysyłane na serwer, chyba że sam skonfigurujesz webhook do własnego serwera.

Czy moje komentarze zostają przy edycji w drzewie?

Tak. Zmiana w drzewie jest zapisywana w kodzie dokładnie w tym miejscu; komentarze, puste wiersze i reszta formatowania zostają bez zmian. Cofnij wycofuje każdą zmianę.

Dlaczego edytor zgłasza tabulatory?

YAML nie dopuszcza tabulatorów we wcięciach. Edytor oznacza każde takie miejsce, a klawisz Tab w kodzie wstawia spacje.

Czy rozumie kotwice, aliasy i kilka dokumentów?

Tak. Kotwice (&name) i aliasy (*name) są oznaczone w drzewie, klucze scalające (<<) są rozwiązywane przy konwersji, alias bez kotwicy jest zgłaszany, a każdy dokument po --- dostaje własne drzewo.

Czy może przekształcić YAML w JSON, CSV lub XML?

Tak, w karcie Konwersja lub w Eksporcie. Lista mapowań staje się tabelą CSV. Otwierane pliki JSON, CSV i XML są przekształcane w YAML.

Gdzie zapisywane są moje dokumenty?

Tylko w przeglądarce. Kliknij przycisk folderu w lewym górnym rogu (Moje dokumenty), aby je otwierać, zmieniać ich nazwy, duplikować, pobierać lub usuwać. Wyczyszczenie danych witryny w przeglądarce je usuwa, więc pobierz te, które chcesz zachować - albo pozwól edytorowi wysyłać je na własny serwer („Zapis na serwerze”).

Czy AI może pisać w Edytorze YAML?

Tak, każda AI - ChatGPT, Claude, Gemini, Copilot lub AI w twoim narzędziu programistycznym. Kliknij „Asystent AI”, potem „Kopiuj prompt”, wklej go do swojej AI i napisz, co ma zmienić. AI odpowiada linkiem; kliknij go, a dane pojawią się w edytorze. „Cofnij” cofa każdą zmianę.

Czy Edytor YAML coś kosztuje?

Nie. Edytor jest darmowy, bez reklam i bez rejestracji.