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.

Edite YAML online, como código e como árvore

O Editor YAML mostra o seu código YAML e os dados em árvore lado a lado. Recolha mapeamentos e listas, veja o tipo e o número de entradas de cada valor e altere chaves e valores direto na árvore - a alteração vai para o código exatamente naquele lugar, e os seus comentários e a formatação ficam. Os erros aparecem com linha e coluna, de uma indentação errada a uma tabulação ou um alias sem a sua âncora, e os dados podem ser validados com um JSON Schema e convertidos para JSON, CSV ou XML.

Tudo roda no seu navegador. Os documentos não são enviados, não há cadastro nem publicidade.

O que o editor sabe fazer

Código e árvore

YAML 1.2 com realce à esquerda, a árvore recolhível no meio - uma árvore por documento depois de ---. Um clique na árvore pula para o código, o cursor do código marca o valor dele na árvore.

Edite na árvore, mantenha os comentários

Altere chaves e valores, adicione, duplique, mova e remova entradas, mude um tipo - cada coisa como uma pequena edição do código, então comentários e linhas em branco ficam onde estão.

Erros fáceis de achar

Indentação errada, tabulações, chaves duplicadas, aliases sem a sua âncora e valores que não batem com o seu JSON Schema, cada um com linha e coluna.

Âncoras e aliases

&anchor, *alias e chaves de mesclagem (<<) são marcados na árvore e resolvidos nas conversões.

Converter

Formate com indentação consistente, ou converta para JSON, CSV (uma lista de mapeamentos vira uma tabela) e XML. Arquivos JSON, CSV e XML abrem como YAML.

Muitos documentos

Guarde quantos documentos quiser no seu navegador, cada um com o próprio histórico de desfazer, e baixe todos em um ZIP.

Como funciona

  1. Comece - escolha um modelo em "Novo" (Docker Compose, um workflow do GitHub, Kubernetes, OpenAPI), abra um arquivo .yaml ou cole YAML.
  2. Edite - no código ou na árvore; os dois sempre mostram os mesmos dados.
  3. Valide e exporte - corrija os problemas listados, escolha um schema e baixe YAML, JSON, CSV ou texto.

Use o editor no seu próprio site

Qualquer página https (e localhost) pode incorporar o editor com um <iframe> e ?embed=1 - sem cadastro, sem chave. Incorporado, o editor oculta este texto e mostra um botão Salvar. Há dois jeitos de levar o documento para dentro e para fora.

1. Abrir um arquivo de um link, salvar no seu servidor

src= abre um arquivo (seu servidor precisa permitir CORS), webhook= faz "Salvar" (Ctrl+S) enviar o documento para esse endereço. Acrescente &token=… para um cabeçalho Authorization: Bearer … e &auto para salvar após cada alteração.

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

O webhook recebe um POST com JSON { editor: "yaml", event: "save", id, name, content, updated }; content é o documento como string. Um pequeno script PHP que o guarda:

<?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. A sua página guarda o documento (postMessage)

O editor diz yamleditor:ready, a sua página responde com yamleditor:load, o editor informa yamleditor:loaded, yamleditor:change em edições reais e yamleditor:save quando o usuário salva. A sua página pode enviar yamleditor:get (o estado atual) ou yamleditor:save (apertar Salvar). Salvar passa então pelo seu próprio login e sessão.

<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') {              // o editor está pronto: entregue o documento a ele
    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';   // uma edição real
  if (m.type === 'yamleditor:save') {               // o usuário clicou em "Salvar"
    await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: m.name, content: m.content }) });
    document.title = 'Saved';
  }
});

// Um botão de salvar na sua própria página: a resposta chega como yamleditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'yamleditor:get' }, ORIGIN); }
</script>

Assistente de IA dentro da sua página: ele também funciona no frame. Com allow="clipboard-write" no iframe, "Copiar prompt" usa a área de transferência diretamente (senão o editor recorre ao antigo comando de copiar, ou mostra o prompt para copiar à mão). Um link enviado pela IA não alcança um editor dentro de outro site, então o editor pede à IA e ao usuário que colem a resposta inteira da IA no editor - ou abram o editor em uma janela própria.

3. Em uma janela própria

window.open("https://yaml.giit.ch/?embed=window", "yamleditor-17") abre o editor completo em uma janela própria e troca as mesmas mensagens com window.opener. Os links de uma IA chegam até ele ali. yamleditor:load também pode levar context: { host, title, rules } - o prompt da IA então diz a que lugar o documento pertence e segue as suas regras - e hook: { url, token }, um webhook só para este documento que nunca é guardado. Fechar a janela com alterações não salvas envia yamleditor:closing.

4. IA pelo seu próprio servidor

Entregue ao editor o seu próprio prompt, um endereço no seu site e uma chave para esta sessão do editor. A janela de IA mostra então "Conectado a" o seu site, o que você diz à IA, e a escolha alterar o documento atual ou criar um novo; Copiar prompt junta tudo. A IA envia o resultado com a chave para o seu servidor, e a sua página o abre no editor - um novo documento abre separado e fica no navegador do usuário. Uma chave por sessão do editor: ela vale enquanto o editor estiver aberto, e só enquanto não tiver nenhuma o editor a pede com yamleditor:key-request. O editor nunca envia a chave por conta própria e nunca a guarda; o endereço precisa ser https no seu próprio host ou em um subdomínio dele.

const key = async () => (await fetch('/api/ai-key.php?doc=17')).json();   // uma chave por sessão do 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);
// guarde o id de yamleditor:loaded e ignore change/save/closing com outro id
// só enquanto o editor não tiver chave:
if (m.type === 'yamleditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'yamleditor:ai', key: k.key }, ORIGIN); }
// enquanto o editor estiver aberto, avise o seu servidor a cada minuto; fechar o editor ou a página invalida a chave
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// o seu servidor tem um resultado (polling, SSE …): target é "current" ou "new"
ed.contentWindow.postMessage({ type: 'yamleditor:load', name: 'Settings', content: draft, from: 'ai', target }, ORIGIN);

Crie chaves com pelo menos 128 bits aleatórios, guarde só o hash delas, vincule cada uma ao usuário logado, ao documento e a esta sessão do editor, crie uma por sessão, mantenha-a válida só enquanto a sua página informar que a sessão está aberta, e invalide-a quando o editor ou a página fechar.

O protocolo completo está em llms.txt - entregue-o a uma IA e ela monta a conexão para o seu sistema. O Editor JSON funciona do mesmo jeito com o prefixo jsoneditor: - json.giit.ch.

Perguntas frequentes

Meus dados são enviados para algum lugar?

Não. O editor roda inteiramente no seu navegador. Seus documentos nunca são enviados a um servidor, a não ser que você mesmo configure um webhook para o seu próprio servidor.

Meus comentários ficam quando edito na árvore?

Sim. Uma alteração na árvore é gravada no código exatamente naquele lugar; comentários, linhas em branco e o resto da formatação ficam como estão. Desfazer desfaz qualquer alteração.

Por que o editor reclama de tabulações?

O YAML não permite tabulações na indentação. O editor marca cada lugar, e a tecla Tab no código insere espaços.

Ele entende âncoras, aliases e vários documentos?

Sim. Âncoras (&name) e aliases (*name) são marcados na árvore, chaves de mesclagem (<<) são resolvidas nas conversões, um alias sem a sua âncora é apontado, e cada documento depois de --- ganha a sua própria árvore.

Ele converte YAML para JSON, CSV ou XML?

Sim, na aba Converter ou em Exportar. Uma lista de mapeamentos vira uma tabela CSV. Arquivos JSON, CSV e XML que você abre são convertidos para YAML.

Onde meus documentos ficam salvos?

Só no seu navegador. Clique no botão de pasta no canto superior esquerdo (Meus documentos) para abrir, renomear, duplicar, baixar ou excluir os documentos. Limpar os dados do site no navegador os apaga, então baixe os que você quer manter - ou deixe o editor enviá-los ao seu próprio servidor ("Salvar no servidor").

Uma IA pode escrever no Editor YAML?

Sim, qualquer IA - ChatGPT, Claude, Gemini, Copilot ou a IA da sua ferramenta de programação. Clique em "Assistente de IA", depois em "Copiar prompt", cole na sua IA e diga o que ela deve alterar. A IA responde com um link; clique nele e os dados aparecem no seu editor. "Desfazer" desfaz qualquer alteração.

O Editor YAML custa alguma coisa?

Não. O editor é gratuito, sem anúncios e sem cadastro.