Code
YAML 편집기는 YAML 코드와 데이터 트리를 나란히 보여 줍니다. 매핑과 목록을 접고, 모든 값의 유형과 항목 수를 보고, 트리에서 바로 키와 값을 바꾸세요 - 변경은 코드의 정확히 그 위치에 들어가고 주석과 서식은 유지됩니다. 잘못된 들여쓰기부터 탭, 앵커 없는 별칭까지 오류가 줄과 열과 함께 나열되며, 데이터를 JSON Schema로 검사하고 JSON, CSV, XML로 변환할 수 있습니다.
모든 것이 브라우저에서 실행됩니다. 문서는 업로드되지 않으며 가입도 광고도 없습니다.
왼쪽에는 강조 표시된 YAML 1.2, 가운데에는 접을 수 있는 트리 - --- 뒤의 문서마다 트리 하나. 트리를 클릭하면 코드로 이동하고, 코드 커서는 트리에서 해당 값을 표시합니다.
키와 값 변경, 항목 추가, 복제, 이동, 삭제, 유형 변경 - 모두 코드의 작은 편집이므로 주석과 빈 줄은 제자리에 남습니다.
잘못된 들여쓰기, 탭, 중복 키, 앵커 없는 별칭, JSON Schema에 맞지 않는 값 - 각각 줄과 열과 함께.
&anchor, *alias, 병합 키(<<)는 트리에 표시되고 변환할 때 풀어 씁니다.
일관된 들여쓰기로 서식 정리, 또는 JSON, CSV(매핑 목록은 표가 됩니다), XML로 변환. JSON, CSV, XML 파일은 YAML로 열립니다.
문서를 몇 개든 각자의 실행 취소 기록과 함께 브라우저에 보관하고, 모두 ZIP으로 다운로드하세요.
모든 https 페이지(와 localhost)는 <iframe>과 ?embed=1로 편집기를 삽입할 수 있습니다 - 가입도 키도 필요 없습니다. 삽입되면 편집기는 이 텍스트를 숨기고 저장 버튼을 보여 줍니다. 문서를 넣고 빼는 방법은 두 가지입니다.
src=는 파일을 열고(서버가 CORS를 허용해야 합니다), webhook=은 "저장"(Ctrl+S) 시 문서를 그 주소로 보내게 합니다. Authorization: Bearer … 헤더를 쓰려면 &token=…을, 변경할 때마다 저장하려면 &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>웹훅은 JSON { editor: "yaml", event: "save", id, name, content, updated }이 담긴 POST를 받습니다. 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}';편집기가 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') { // 사용자가 "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의 답변 전체를 편집기에 붙여 넣거나 편집기를 별도의 창으로 열라고 안내합니다.
window.open("https://yaml.giit.ch/?embed=window", "yamleditor-17")은 전체 편집기를 별도의 창으로 열고 window.opener와 같은 메시지를 주고받습니다. AI의 링크는 그 창에 닿습니다. yamleditor:load에는 context: { host, title, rules }도 담을 수 있으며(그러면 AI 프롬프트가 문서의 소속을 알리고 내 규칙을 따릅니다), hook: { url, token }, 즉 저장되지 않는 이 문서 전용 웹훅도 담을 수 있습니다. 저장하지 않은 변경이 있는 채로 창을 닫으면 yamleditor:closing을 보냅니다.
편집기에 내 프롬프트, 내 사이트의 주소, 이 편집기 세션용 키를 넘기세요. 그러면 AI 대화 상자에 내 사이트와 "연결됨", AI에게 전하는 내용, 현재 문서 변경 또는 새 문서 만들기 선택이 표시되고, 프롬프트 복사가 이를 모두 합칩니다. AI는 결과를 키와 함께 내 서버로 POST하고, 페이지가 이를 편집기에서 엽니다. 새 문서는 따로 열리며 사용자의 브라우저에 남습니다. 편집기 세션당 키 하나: 편집기가 열려 있는 동안 유효하며, 키가 없을 때만 편집기가 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에게 주면 내 시스템에 맞는 연결을 만들어 줍니다. JSON 편집기도 접두사 jsoneditor:로 똑같이 작동합니다 - json.giit.ch.
아니요. 편집기는 전부 브라우저에서 실행됩니다. 직접 내 서버로 웹훅을 설정하지 않는 한, 문서는 어떤 서버로도 보내지지 않습니다.
네. 트리에서의 변경은 코드의 정확히 그 위치에 쓰이며, 주석, 빈 줄, 나머지 서식은 그대로 남습니다. 실행 취소로 모든 변경을 되돌릴 수 있습니다.
YAML은 들여쓰기에 탭을 허용하지 않습니다. 편집기는 그런 곳을 모두 표시하며, 코드에서 Tab 키는 공백을 넣습니다.
네. 앵커(&name)와 별칭(*name)은 트리에 표시되고, 병합 키(<<)는 변환할 때 풀어 쓰며, 앵커 없는 별칭은 보고되고, --- 뒤의 문서마다 트리가 따로 생깁니다.
네, 변환 탭이나 내보내기에서 할 수 있습니다. 매핑 목록은 CSV 표가 됩니다. 여는 JSON, CSV, XML 파일은 YAML로 변환됩니다.
브라우저에만 저장됩니다. 왼쪽 위의 폴더 버튼(내 문서)을 클릭해 열기, 이름 바꾸기, 복제, 다운로드, 삭제를 할 수 있습니다. 브라우저의 사이트 데이터를 지우면 함께 삭제되므로 보관할 문서는 다운로드하거나, 편집기가 내 서버로 보내게 하세요("서버에 저장").
네, 어떤 AI든 됩니다 - ChatGPT, Claude, Gemini, Copilot 또는 코딩 도구의 AI. "AI 도우미", 이어서 "프롬프트 복사"를 클릭하고 AI에 붙여 넣은 뒤 무엇을 바꿀지 말해 주세요. AI가 링크로 답하면 클릭하세요. 데이터가 편집기에 나타납니다. "실행 취소"로 모든 변경을 되돌릴 수 있습니다.
아니요. 편집기는 무료이며 광고도 가입도 없습니다.