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?

Нисколько. Редактор бесплатный, без рекламы и без регистрации.