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.

Edita YAML online, como código y como árbol

El Editor de YAML muestra tu código YAML y los datos como árbol uno al lado del otro. Pliega mapeos y listas, ve el tipo y el número de entradas de cada valor, y cambia claves y valores directamente en el árbol: el cambio va al código exactamente en ese lugar, y tus comentarios y tu formato se quedan. Los errores aparecen con línea y columna, desde una sangría incorrecta hasta un tabulador o un alias sin su ancla, y los datos se pueden validar con un JSON Schema y convertir a JSON, CSV o XML.

Todo se ejecuta en tu navegador. Los documentos no se suben, no hay registro ni publicidad.

Lo que puede hacer el editor

Código y árbol

YAML 1.2 resaltado a la izquierda, el árbol plegable en el centro: un árbol por documento después de ---. Un clic en el árbol salta al código, el cursor del código marca su valor en el árbol.

Edita en el árbol, conserva los comentarios

Cambia claves y valores, añade, duplica, mueve y quita entradas, cambia un tipo: cada cosa como una pequeña edición del código, así que los comentarios y las líneas en blanco se quedan donde están.

Errores que puedes encontrar

Sangría incorrecta, tabuladores, claves repetidas, alias sin su ancla y valores que no cumplen tu JSON Schema, cada uno con su línea y columna.

Anclas y alias

&anchor, *alias y las claves de fusión (<<) se marcan en el árbol y se resuelven en las conversiones.

Convertir

Formatea con una sangría uniforme, o convierte a JSON, CSV (una lista de mapeos es una tabla) y XML. Los archivos JSON, CSV y XML se abren como YAML.

Muchos documentos

Guarda todos los documentos que quieras en tu navegador, cada uno con su propio historial de deshacer, y descárgalos todos como ZIP.

Cómo funciona

  1. Empieza: elige una plantilla en «Nuevo» (Docker Compose, un workflow de GitHub, Kubernetes, OpenAPI), abre un archivo .yaml o pega YAML.
  2. Edita: en el código o en el árbol; ambos muestran siempre los mismos datos.
  3. Valida y exporta: corrige los problemas de la lista, elige un esquema y descarga YAML, JSON, CSV o texto.

Usa el editor en tu propio sitio web

Cualquier página https (y localhost) puede integrar el editor con un <iframe> y ?embed=1, sin registro y sin clave. Integrado, el editor oculta este texto y muestra un botón Guardar. Hay dos formas de meter y sacar el documento.

1. Abrir un archivo desde un enlace, guardar en tu servidor

src= abre un archivo (tu servidor debe permitir CORS), webhook= hace que «Guardar» (Ctrl+S) envíe el documento a esa dirección. Añade &token=… para una cabecera Authorization: Bearer … y &auto para guardar después de cada cambio.

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

El webhook recibe un POST con JSON { editor: "yaml", event: "save", id, name, content, updated }; content es el documento como cadena. Un pequeño script PHP que lo 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. Tu página guarda el documento (postMessage)

El editor dice yamleditor:ready, tu página responde con yamleditor:load, el editor informa con yamleditor:loaded, con yamleditor:change en cada edición real y con yamleditor:save cuando el usuario guarda. Tu página puede enviar yamleditor:get (el estado actual) o yamleditor:save (pulsar Guardar). Así el guardado pasa por tu propio inicio de sesión y tu sesión.

<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') {              // el editor está listo: pásale el documento
    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';   // una edición real
  if (m.type === 'yamleditor:save') {               // el usuario hizo clic en «Guardar»
    await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: m.name, content: m.content }) });
    document.title = 'Saved';
  }
});

// Un botón de guardar en tu propia página: la respuesta llega como yamleditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'yamleditor:get' }, ORIGIN); }
</script>

Asistente de IA dentro de tu página: también funciona en el marco. Con allow="clipboard-write" en el iframe, «Copiar prompt» usa el portapapeles directamente (si no, el editor recurre al antiguo comando de copiar o muestra el prompt para copiarlo a mano). Un enlace que envía la IA no puede llegar a un editor dentro de otro sitio web, así que el editor indica a la IA y al usuario que peguen la respuesta completa de la IA en el editor, o que abran el editor en una ventana propia.

3. En una ventana propia

window.open("https://yaml.giit.ch/?embed=window", "yamleditor-17") abre el editor completo en su propia ventana y usa los mismos mensajes con window.opener. Ahí sí le llegan los enlaces de una IA. yamleditor:load también puede llevar context: { host, title, rules } (el prompt de IA dice entonces a dónde pertenece el documento y sigue tus reglas) y hook: { url, token }, un webhook solo para este documento que nunca se guarda. Al cerrar la ventana con cambios sin guardar se envía yamleditor:closing.

4. IA a través de tu propio servidor

Pasa al editor tu propio prompt, una dirección en tu sitio y una clave para esta sesión del editor. El diálogo de IA muestra entonces «Conectado a» tu sitio, lo que le dices a la IA y la opción cambiar el documento actual o crear uno nuevo; Copiar prompt lo junta todo. La IA envía su resultado con la clave a tu servidor, y tu página lo abre en el editor: un documento nuevo se abre aparte y se queda en el navegador del usuario. Una clave por sesión del editor: sigue siendo válida mientras el editor esté abierto, y solo mientras no tenga ninguna el editor la pide con yamleditor:key-request. El editor nunca envía la clave por sí mismo ni la guarda; la dirección debe ser https en tu propio host o en un subdominio suyo.

const key = async () => (await fetch('/api/ai-key.php?doc=17')).json();   // una clave por sesión del 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);
// recuerda el id de yamleditor:loaded e ignora change/save/closing con otro id
// solo mientras el editor no tenga clave:
if (m.type === 'yamleditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'yamleditor:ai', key: k.key }, ORIGIN); }
// mientras el editor esté abierto, avisa a tu servidor cada minuto; cerrar el editor o la página anula la clave
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// tu servidor tiene un resultado (polling, SSE …): target es «current» o «new»
ed.contentWindow.postMessage({ type: 'yamleditor:load', name: 'Settings', content: draft, from: 'ai', target }, ORIGIN);

Crea claves con al menos 128 bits aleatorios, guarda solo su hash, vincula cada una al usuario con sesión iniciada, al documento y a esta sesión del editor, crea una por sesión, mantenla válida solo mientras tu página informe de que la sesión está abierta, y anúlala cuando se cierre el editor o la página.

El protocolo completo está en llms.txt: dáselo a una IA y construirá la conexión para tu sistema. El Editor de JSON funciona igual con el prefijo jsoneditor:: json.giit.ch.

Preguntas frecuentes

¿Se suben mis datos?

No. El editor se ejecuta por completo en tu navegador. Tus documentos nunca se envían a un servidor, salvo que tú mismo configures un webhook a tu propio servidor.

¿Se conservan mis comentarios cuando edito en el árbol?

Sí. Un cambio en el árbol se escribe en el código exactamente en ese lugar; los comentarios, las líneas en blanco y el resto del formato se quedan como están. Deshacer revierte cada cambio.

¿Por qué se queja el editor de los tabuladores?

YAML no permite tabuladores para sangrar. El editor marca cada lugar, y la tecla Tab en el código inserta espacios.

¿Entiende anclas, alias y varios documentos?

Sí. Las anclas (&name) y los alias (*name) se marcan en el árbol, las claves de fusión (<<) se resuelven en las conversiones, un alias sin su ancla se señala, y cada documento después de --- tiene su propio árbol.

¿Puede convertir YAML a JSON, CSV o XML?

Sí, en la pestaña Convertir o en Exportar. Una lista de mapeos se convierte en una tabla CSV. Los archivos JSON, CSV y XML que abres se convierten a YAML.

¿Dónde se guardan mis documentos?

Solo en tu navegador. Haz clic en el botón de carpeta arriba a la izquierda (Mis documentos) para abrirlos, renombrarlos, duplicarlos, descargarlos o eliminarlos. Si borras los datos del sitio en tu navegador, desaparecen; descarga los que quieras conservar, o deja que el editor los envíe a tu propio servidor («Guardar en servidor»).

¿Puede una IA escribir en el Editor de YAML?

Sí, cualquier IA: ChatGPT, Claude, Gemini, Copilot o la IA de tu herramienta de programación. Haz clic en «Asistente de IA» y luego en «Copiar prompt», pégalo en tu IA y dile qué debe cambiar. La IA responde con un enlace; haz clic en él y los datos aparecen en tu editor. «Deshacer» revierte cada cambio.

¿Cuesta algo el Editor de YAML?

No. El editor es gratuito, sin anuncios y sin registro.