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 онлайн - як код і як дерево

Редактор YAML показує ваш код YAML і дані у вигляді дерева поруч. Згортайте відображення й списки, бачте тип і кількість записів кожного значення та змінюйте ключі й значення прямо в дереві - зміна потрапляє в код саме в це місце, а ваші коментарі й форматування залишаються. Помилки перелічено з рядком і стовпцем - від неправильного відступу до табуляції чи аліаса без якоря, - а дані можна перевірити за JSON Schema й перетворити на JSON, CSV або XML.

Усе працює у вашому браузері. Документи нікуди не вивантажуються, немає ні реєстрації, ні реклами.

Що вміє редактор

Код і дерево

Підсвічений YAML 1.2 ліворуч, згортане дерево посередині - окреме дерево для кожного документа після ---. Клацання в дереві переходить до коду, курсор коду позначає своє значення в дереві.

Редагування в дереві зі збереженням коментарів

Змінюйте ключі й значення, додавайте, дублюйте, переміщуйте й видаляйте записи, змінюйте тип - кожна дія як невелика правка коду, тож коментарі й порожні рядки залишаються на своїх місцях.

Помилки, які легко знайти

Неправильний відступ, табуляції, повторювані ключі, аліаси без якоря та значення, що не відповідають вашій JSON Schema, - кожна з рядком і стовпцем.

Якорі й аліаси

&anchor, *alias і ключі злиття (<<) позначено в дереві та розкрито для перетворень.

Перетворення

Форматуйте з однаковими відступами або перетворюйте на JSON, CSV (список відображень - це таблиця) і XML. Файли JSON, CSV і XML відкриваються як YAML.

Багато документів

Зберігайте скільки завгодно документів у браузері, кожен із власною історією скасувань, і завантажуйте їх усі одним ZIP.

Як це працює

  1. Почніть - виберіть шаблон у «Новий» (Docker Compose, робочий процес GitHub, Kubernetes, OpenAPI), відкрийте файл .yaml або вставте YAML.
  2. Редагуйте - у коді або в дереві; обидва завжди показують ті самі дані.
  3. Перевірте й експортуйте - виправте перелічені проблеми, виберіть схему й завантажте YAML, JSON, CSV або текст.

Редактор на вашому сайті

Будь-яка сторінка https (і localhost) може вбудувати редактор за допомогою <iframe> і ?embed=1 - без реєстрації, без ключа. У вбудованому вигляді редактор приховує цей текст і показує кнопку «Зберегти». Передати документ у редактор і отримати його назад можна двома способами.

1. Відкрити файл за посиланням, зберегти на ваш сервер

src= відкриває файл (ваш сервер має дозволяти CORS), webhook= змушує «Зберегти» (Ctrl+S) надсилати документ на цю адресу. Додайте &token=… для заголовка Authorization: Bearer … і &auto, щоб зберігати після кожної зміни.

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

Вебхук отримує POST із JSON { editor: "yaml", event: "save", id, name, content, updated }; content - це документ у вигляді рядка. Невеликий PHP-скрипт, який його зберігає:

<?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. Документ зберігає ваша сторінка (postMessage)

Редактор повідомляє yamleditor:ready, ваша сторінка відповідає yamleditor:load, редактор повідомляє yamleditor:loaded, yamleditor:change при справжніх змінах і yamleditor:save, коли користувач зберігає. Ваша сторінка може надіслати yamleditor:get (поточний стан) або yamleditor:save (натиснути «Зберегти»). Тоді збереження проходить через ваш власний вхід і сеанс.

<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') {              // редактор готовий: передайте йому документ
    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';   // справжня зміна
  if (m.type === 'yamleditor:save') {               // користувач натиснув «Зберегти»
    await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: m.name, content: m.content }) });
    document.title = 'Saved';
  }
});

// Кнопка збереження на вашій сторінці: відповідь надходить як yamleditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'yamleditor:get' }, ORIGIN); }
</script>

ШІ-асистент усередині вашої сторінки: він працює і у фреймі. З allow="clipboard-write" на iframe «Копіювати промпт» використовує буфер обміну напряму (інакше редактор вдається до старої команди копіювання або показує промпт, щоб скопіювати його вручну). Посилання, яке надсилає ШІ, не може дістатися до редактора всередині іншого сайту, тому редактор просить ШІ та користувача натомість вставити всю відповідь ШІ в редактор - або відкрити редактор в окремому вікні.

3. В окремому вікні

window.open("https://yaml.giit.ch/?embed=window", "yamleditor-17") відкриває повний редактор в окремому вікні, і він обмінюється тими самими повідомленнями з window.opener. Посилання від ШІ доходять до нього туди. yamleditor:load може також містити context: { host, title, rules } - тоді промпт для ШІ каже, де розміщено документ, і дотримується ваших правил - і hook: { url, token }, вебхук лише для цього документа, який ніколи не зберігається. Якщо закрити вікно з незбереженими змінами, надсилається yamleditor:closing.

4. ШІ через ваш власний сервер

Передайте редактору власний промпт, адресу на вашому сайті та ключ для цього сеансу редактора. Тоді діалог ШІ показує «Під’єднано до» вашого сайту, що ви повідомляєте ШІ, і вибір змінити поточний документ або створити новий; Копіювати промпт збирає все разом. ШІ надсилає свій результат із ключем на ваш сервер, а ваша сторінка відкриває його в редакторі - новий документ відкривається окремо й залишається в браузері користувача. Один ключ на сеанс редактора: він дійсний, поки редактор відкрито, і лише поки ключа немає, редактор запитує його через yamleditor:key-request. Редактор ніколи сам не надсилає ключ і ніколи його не зберігає; адреса має бути https на вашому власному хості або його піддомені.

const key = async () => (await fetch('/api/ai-key.php?doc=17')).json();   // один ключ на сеанс редактора
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);
// запам’ятайте id з yamleditor:loaded та ігноруйте change/save/closing з іншим id
// лише поки редактор не має ключа:
if (m.type === 'yamleditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'yamleditor:ai', key: k.key }, ORIGIN); }
// поки редактор відкрито, повідомляйте свій сервер щохвилини; закриття редактора або сторінки анулює ключ
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// ваш сервер має результат (polling, SSE …): target - "current" або "new"
ed.contentWindow.postMessage({ type: 'yamleditor:load', name: 'Settings', content: draft, from: 'ai', target }, ORIGIN);

Створюйте ключі щонайменше зі 128 випадкових бітів, зберігайте лише їхній хеш, прив’язуйте кожен до користувача, що увійшов, до документа й до цього сеансу редактора, створюйте один на сеанс, тримайте його дійсним лише поки ваша сторінка повідомляє, що сеанс відкритий, і анулюйте його, коли редактор або сторінка закриваються.

Увесь протокол - у llms.txt: дайте його ШІ, і він побудує під’єднання для вашої системи. Редактор JSON працює так само з префіксом jsoneditor: - json.giit.ch.

Часті запитання

Мої дані кудись вивантажуються?

Ні. Редактор повністю працює у вашому браузері. Ваші документи ніколи не надсилаються на сервер, якщо тільки ви самі не налаштуєте вебхук на свій власний сервер.

Чи зберігаються мої коментарі, коли я редагую в дереві?

Так. Зміну в дереві записано в код саме в це місце; коментарі, порожні рядки й решта форматування залишаються як були. «Скасувати» повертає кожну зміну назад.

Чому редактор скаржиться на табуляції?

YAML не дозволяє табуляції для відступів. Редактор позначає кожне таке місце, а клавіша Tab у коді вставляє пробіли.

Чи розуміє він якорі, аліаси й кілька документів?

Так. Якорі (&name) і аліаси (*name) позначено в дереві, ключі злиття (<<) розкрито для перетворень, про аліас без якоря повідомляється, а кожен документ після --- отримує власне дерево.

Чи може він перетворити YAML на JSON, CSV або XML?

Так, у вкладці Конвертер або в «Експорт». Список відображень стає таблицею CSV. Файли JSON, CSV і XML, які ви відкриваєте, перетворюються на YAML.

Де зберігаються мої документи?

Лише у вашому браузері. Натисніть кнопку з текою вгорі ліворуч («Мої документи»), щоб відкривати, перейменовувати, дублювати, завантажувати або видаляти їх. Очищення даних сайту в браузері видаляє їх, тому завантажте ті, які хочете зберегти, - або нехай редактор надсилає їх на ваш власний сервер («На сервер»).

Чи може ШІ писати в редакторі YAML?

Так, будь-який ШІ - ChatGPT, Claude, Gemini, Copilot або ШІ у вашому інструменті для програмування. Натисніть «ШІ-асистент», потім «Копіювати промпт», вставте його у свій ШІ та скажіть, що треба змінити. ШІ відповідає посиланням; клацніть його, і дані з’являться у вашому редакторі. «Скасувати» повертає кожну зміну назад.

Чи платний редактор YAML?

Ні. Редактор безкоштовний, без реклами й без реєстрації.