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. 检查并导出:修正列出的问题,选择 Schema,然后下载 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>

Webhook 会收到一个带 JSON 的 POST 请求 { 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>

页面内的 AI 助手:在框架中同样可用。在 iframe 上设置 allow="clipboard-write" 后,“复制提示词”会直接使用剪贴板(否则编辑器会退回旧的复制命令,或显示提示词供手动复制)。AI 发送的链接无法到达另一个网站中的编辑器,因此编辑器会提示 AI 和用户把 AI 的完整回答粘贴到编辑器中,或在单独的窗口中打开编辑器。

3. 在单独的窗口中

window.open("https://yaml.giit.ch/?embed=window", "yamleditor-17") 会在单独的窗口中打开完整的编辑器,并通过 window.opener 使用相同的消息。AI 的链接可以到达那里。yamleditor:load 还可以带上 context: { host, title, rules }(AI 提示词随后会说明文档属于哪里,并遵循你的规则),以及 hook: { url, token },即仅用于此文档、从不保存的 Webhook。关闭有未保存更改的窗口时会发送 yamleditor:closing。

4. 通过你自己的服务器使用 AI

向编辑器提供你自己的提示词、你网站上的一个地址和本次编辑器会话的密钥。AI 对话框随后会显示“已连接到”你的网站、你告诉 AI 的内容,以及修改当前文档或新建一个文档的选项;复制提示词会把这些都组合起来。AI 带着密钥把结果发送到你的服务器,你的页面再在编辑器中打开它;新文档会单独打开,并保留在用户的浏览器中。每个编辑器会话一个密钥:编辑器打开期间有效,只有在没有密钥时,编辑器才会用 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);
// 记住 yamleditor:loaded 中的 id,忽略 id 不同的 change/save/closing
// 仅在编辑器没有密钥时:
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);
// 你的服务器有了结果(轮询、SSE …):target 为 "current" 或 "new"
ed.contentWindow.postMessage({ type: 'yamleditor:load', name: 'Settings', content: draft, from: 'ai', target }, ORIGIN);

密钥至少使用 128 位随机数,只保存其哈希值,将每个密钥绑定到已登录用户、文档和本次编辑器会话,每个会话一个,仅在你的页面报告会话仍打开时有效,并在编辑器或页面关闭时作废。

完整协议见 llms.txt,把它交给 AI,AI 就能为你的系统建立连接。JSON 编辑器的用法相同,前缀为 jsoneditor:,见 json.giit.ch。

常见问题

我的数据会被上传吗?

不会。编辑器完全在你的浏览器中运行。你的文档绝不会发送到服务器,除非你自己设置了指向自己服务器的 Webhook。

在树中编辑时,注释会保留吗?

会。树中的更改会准确写入代码中的该位置;注释、空行和其余格式都保持不变。“撤销”可撤回每一处更改。

为什么编辑器会对制表符报错?

YAML 不允许用制表符缩进。编辑器会标出每一处,代码中的 Tab 键会插入空格。

支持锚点、别名和多个文档吗?

支持。锚点(&name)和别名(*name)会在树中标出,合并键(<<)在转换时会被解析,没有锚点的别名会被报告,--- 之后的每个文档都有自己的树。

能把 YAML 转换为 JSON、CSV 或 XML 吗?

能,在转换标签页中或在“导出”下。映射列表会变成 CSV 表格。你打开的 JSON、CSV 和 XML 文件会被转换为 YAML。

我的文档保存在哪里?

只保存在你的浏览器中。点击左上角的文件夹按钮(我的文档)即可打开、重命名、复制、下载或删除它们。清除浏览器的网站数据会删除它们,因此请下载需要保留的文档,或让编辑器把它们发送到你自己的服务器(“保存到服务器”)。

AI 能在 YAML 编辑器中写作吗?

能,任何 AI 都可以:ChatGPT、Claude、Gemini、Copilot 或你编程工具中的 AI。点击“AI 助手”,再点击“复制提示词”,粘贴到你的 AI 中并说明要修改什么。AI 会回复一个链接;点击它,数据就会出现在你的编辑器中。“撤销”可撤回每一处更改。

YAML 编辑器收费吗?

不收费。编辑器免费,没有广告,无需注册。