SHLS 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. The prompt explains SHLS, so the AI writes valid SHLS.

  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://shls.giit.ch); content is the document as a string:

{ "editor": "shls", "event": "save", "id": "…", "name": "Products",
  "content": "Product\n Name\n Price\n\n Lamp\n 19.90\n",
  "updated": "2026-01-15T09:30:00.000Z" }
Embed the editor in your website 
<iframe src="https://shls.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://shls.giit.ch' || e.source !== frame.contentWindow) return;
  if (e.data.type === 'shlseditor:ready')
    frame.contentWindow.postMessage({ type: 'shlseditor:load', name: 'Products',
      content: shlsText }, 'https://shls.giit.ch');
  if (e.data.type === 'shlseditor:save') saveOnYourServer(e.data.content);
});
</script>

Also possible: ?src=<URL of a .shls 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 (shlseditor:ai, shlseditor:key-request) - see "Use the editor on your own website" below the editor. Details are in llms.txt.

Help

How it works

  1. Write SHLS on the left - or start with New and one of the templates. A section is its name, then its keys (indented by one space, the keys of a nested list one level deeper), exactly one blank line, then the records: one value per line in the order of the keys.
  2. The middle shows each section with its key block and its records, the keys as labels; nested lists fold. It reads the code exactly as the reference SHLSDecoder does.
  3. Click a value, a key or a section name to change it right there. Enter or a click elsewhere writes the change into the code (one step for Undo), Escape cancels. The buttons above add, duplicate, move and remove records and keys - a key added or removed is added to or removed from every record.
  4. A click in the middle puts the code's cursor on that line; the cursor in the code marks its record, key or value. Problems (a record with a value too few, indentation that is not a whole level, a missing blank line) are listed above the code with their line - click one to go there.
  5. Record on the right shows the selected record as a form; Insert adds records, keys and sections; Convert counts the tokens against JSON and converts to JSON, YAML, CSV and JSON Lines; Outline lists the sections.
  6. My documents (the folder button at the top left) lists every document kept in this browser. Export saves it as SHLS, JSON, YAML, CSV or text.

Keyboard shortcuts

↑ ↓ ← →
In the records: go up and down, fold and unfold
Enter
In the records: change the value, key or section name
Delete
In the records: remove the record or key
Alt + ↑ / ↓
In the records: move the record or key up / down
Ctrl + F
Search keys and values
Tab / Shift + Tab
Indent / outdent in the code by one level
Ctrl + Z / Y
Undo / redo
Ctrl + S / E
Save (download, or to your server) / export
Ctrl + O
My documents

Enter keeps the indentation of the line; after a section name it starts the key block.

온라인에서 SHLS 편집하기 - 토큰을 아끼는 데이터 형식

SHLS(Sebis Hierarchical List Structure)는 따옴표, 괄호, 콜론, 반복되는 키 없이 구조화된 데이터를 씁니다: 각 섹션은 키를 한 번만 적고, 그 아래 레코드는 값만 나열합니다. SHLS 편집기는 코드와 함께 그 옆에 각 섹션의 키 블록과 레코드를 보여 줍니다. 그 자리에서 값, 키, 레코드를 바꾸고, 줄별로 문제를 확인하고, JSON, YAML, CSV와 상호 변환하고, SHLS가 JSON보다 토큰을 얼마나 아끼는지 확인하세요.

모든 것이 브라우저에서 실행됩니다. 문서는 업로드되지 않으며 가입도 광고도 없습니다.

1분 만에 보는 SHLS

섹션은 이름으로 시작합니다. 키 블록은 공백 하나로 들여쓴 키를 나열하고, 중첩 목록의 키는 한 수준 더 깊게 씁니다. 정확히 빈 줄 하나 뒤에 레코드가 옵니다: 키 순서대로 줄마다 값 하나. 중첩 목록은 별도의 줄(그 키, 또는 자리 표시자 PH)을 가지며 그 레코드는 한 수준 더 깊습니다. 모든 값은 텍스트입니다 - 숫자나 날짜로 바꾸는 것은 읽는 프로그램의 몫입니다.

Product
 Name
 Price

 Smartphone A1
 599.99

 Laptop B2
 1299.99

Company
 Name
 Location
  Country
  City

 TechCorp
 PH
  USA
  San Francisco

같은 데이터를 JSON으로 쓰면 모든 레코드에서 모든 키를 반복하고 따옴표, 괄호, 콜론이 필요합니다. SHLS는 토큰 하나하나가 중요한 로컬 및 클라우드 AI 모델을 위해 만들어졌습니다. SHLS by Sebastian Grünwald - 형식, 규칙, 참조 SHLSDecoder와 SHLSEncoder(Python)는 GitHub의 SHLS 저장소에 있습니다.

편집기로 할 수 있는 것

코드와 레코드

왼쪽에는 강조 표시된 SHLS - 섹션, 키, 값, 중첩 수준, 자리 표시자 PH. 가운데에는 각 섹션의 키 블록과 레코드가 있고 키는 레이블이 됩니다. 클릭하면 코드로 이동하고, 코드 커서는 해당 레코드를 표시합니다.

그 자리에서 편집

값, 키, 섹션 이름 변경, 레코드와 키 추가, 복제, 이동, 삭제. 레코드는 키 블록을 따릅니다: 새 키가 생기면 모든 레코드에 "-"가 들어갑니다. 각각 실행 취소 한 번으로 되돌립니다.

참조 구현처럼 읽기

편집기는 SHLSDecoder와 똑같이 SHLS를 읽고, 보이는 것과 다르게 읽힐 부분을 나열합니다: 값이 하나 모자라거나 남는 레코드, 들여쓰기, 키 블록 뒤의 빈 줄, 두 번 나온 키.

토큰

변환 탭은 SHLS와 같은 데이터를 JSON으로 썼을 때의 대략적인 토큰 수를 세어, 절약량을 한눈에 보여 줍니다.

변환

SHLSDecoder와 SHLSEncoder와 똑같은 JSON 상호 변환, YAML, CSV(섹션 하나를 표로), JSON Lines. JSON, YAML, CSV, JSON Lines 파일은 SHLS로 열립니다.

많은 문서

문서를 몇 개든 각자의 실행 취소 기록과 함께 브라우저에 보관하고, 모두 ZIP으로 다운로드하세요.

사용 방법

  1. 시작 - "새로 만들기"에서 템플릿을 고르거나 .shls 파일을 열거나, JSON, YAML, CSV 파일을 열어 SHLS로 받으세요.
  2. 편집 - 코드나 레코드에서. 둘은 항상 같은 데이터를 보여 줍니다.
  3. 검사와 변환 - 나열된 문제를 고치고 토큰을 비교한 뒤 SHLS, JSON, YAML, CSV 또는 텍스트를 다운로드하세요.

내 웹사이트에서 편집기 사용하기

모든 https 페이지(와 localhost)는 <iframe>과 ?embed=1로 편집기를 삽입할 수 있습니다 - 가입도 키도 필요 없습니다. 삽입되면 편집기는 이 텍스트를 숨기고 저장 버튼을 보여 줍니다. 문서를 넣고 빼는 방법은 두 가지입니다.

1. 링크로 파일을 열고 내 서버에 저장하기

src=는 파일을 열고(서버가 CORS를 허용해야 합니다), webhook=은 "저장"(Ctrl+S) 시 문서를 그 주소로 보내게 합니다. Authorization: Bearer … 헤더를 쓰려면 &token=…을, 변경할 때마다 저장하려면 &auto를 추가하세요.

<iframe src="https://shls.giit.ch/?embed=1&src=https://your-site.com/data/products.shls&webhook=https://your-site.com/save.php"
        allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>

웹훅은 JSON { editor: "shls", event: "save", id, name, content, updated }이 담긴 POST를 받습니다. content는 문자열로 된 문서입니다. 이를 저장하는 작은 PHP 스크립트:

<?php
header('Access-Control-Allow-Origin: https://shls.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__ . "/data/$name.shls", $d['content']);
echo '{"ok":true}';

2. 내 페이지가 문서를 보관하기 (postMessage)

편집기가 shlseditor:ready를 보내면 페이지는 shlseditor:load로 답하고, 편집기는 shlseditor:loaded, 실제 편집 시 shlseditor:change, 사용자가 저장할 때 shlseditor:save를 알립니다. 페이지는 shlseditor:get(현재 상태)이나 shlseditor:save(저장 누르기)를 보낼 수 있습니다. 그러면 저장은 내 로그인과 세션을 거칩니다.

<iframe id="ed" src="https://shls.giit.ch/?embed=1" allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>
<script>
const ed = document.getElementById('ed');
const ORIGIN = 'https://shls.giit.ch';

addEventListener('message', async e => {
  if (e.source !== ed.contentWindow || e.origin !== ORIGIN) return;
  const m = e.data;
  if (m.type === 'shlseditor:ready') {              // 편집기가 준비됨: 문서를 넘깁니다
    ed.contentWindow.postMessage({
      type: 'shlseditor:load',
      name: 'Products',
      content: await (await fetch('/data/products.shls')).text()
    }, ORIGIN);
  }
  if (m.type === 'shlseditor:change') document.title = '● not saved';   // 실제 편집
  if (m.type === 'shlseditor: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';
  }
});

// 내 페이지의 저장 버튼: 응답은 shlseditor:save로 옵니다
function saveNow() { ed.contentWindow.postMessage({ type: 'shlseditor:get' }, ORIGIN); }
</script>

내 페이지 안의 AI 도우미: 프레임 안에서도 작동합니다. iframe에 allow="clipboard-write"가 있으면 "프롬프트 복사"가 클립보드를 직접 사용합니다(없으면 편집기가 예전 복사 명령을 쓰거나 손으로 복사할 프롬프트를 보여 줍니다). AI가 보낸 링크는 다른 웹사이트 안의 편집기에 닿을 수 없으므로, 편집기는 AI와 사용자에게 AI의 답변 전체를 편집기에 붙여 넣거나 편집기를 별도의 창으로 열라고 안내합니다.

3. 별도의 창에서

window.open("https://shls.giit.ch/?embed=window", "shlseditor-17")은 전체 편집기를 별도의 창으로 열고 window.opener와 같은 메시지를 주고받습니다. AI의 링크는 그 창에 닿습니다. shlseditor:load에는 context: { host, title, rules }도 담을 수 있으며(그러면 AI 프롬프트가 문서의 소속을 알리고 내 규칙을 따릅니다), hook: { url, token }, 즉 저장되지 않는 이 문서 전용 웹훅도 담을 수 있습니다. 저장하지 않은 변경이 있는 채로 창을 닫으면 shlseditor:closing을 보냅니다.

4. 내 서버를 통한 AI

편집기에 내 프롬프트, 내 사이트의 주소, 이 편집기 세션용 키를 넘기세요. 그러면 AI 대화 상자에 내 사이트와 "연결됨", AI에게 전하는 내용, 현재 문서 변경 또는 새 문서 만들기 선택이 표시되고, 프롬프트 복사가 이를 모두 합칩니다. AI는 결과를 키와 함께 내 서버로 POST하고, 페이지가 이를 편집기에서 엽니다. 새 문서는 따로 열리며 사용자의 브라우저에 남습니다. 편집기 세션당 키 하나: 편집기가 열려 있는 동안 유효하며, 키가 없을 때만 편집기가 shlseditor:key-request로 요청합니다. 편집기는 키를 직접 보내거나 저장하지 않습니다. 주소는 내 호스트나 그 하위 도메인의 https여야 합니다.

const key = async () => (await fetch('/api/ai-key.php?doc=17')).json();   // 편집기 세션당 키 하나
const k = await key();
ed.contentWindow.postMessage({ type: 'shlseditor:load', name: 'Products', content, ai: {
  label: 'My Site', prompt: 'Keep every key. Only add records.',
  endpoint: 'https://your-site.com/api/ai-result.php', key: k.key } }, ORIGIN);
// shlseditor:loaded의 id를 기억하고 id가 다른 change/save/closing은 무시
// 편집기에 키가 없을 때만:
if (m.type === 'shlseditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'shlseditor: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: 'shlseditor:load', name: 'Products', content: draft, from: 'ai', target }, ORIGIN);

키는 최소 128비트의 무작위 값으로 만들고, 해시만 저장하고, 각각을 로그인한 사용자, 문서, 이 편집기 세션에 묶고, 세션마다 하나씩 만들고, 페이지가 세션이 열려 있다고 알리는 동안만 유효하게 하며, 편집기나 페이지가 닫히면 무효로 하세요.

전체 프로토콜은 llms.txt에 있습니다 - AI에게 주면 내 시스템에 맞는 연결을 만들어 줍니다. JSON 편집기도 접두사 jsoneditor:로 똑같이 작동합니다 - json.giit.ch.

자주 묻는 질문

SHLS란 무엇인가요?

SHLS(Sebis Hierarchical List Structure)는 Sebastian Grünwald가 만든 구조화된 데이터용 텍스트 형식입니다. 각 섹션은 키 블록에 키를 한 번만 적고, 그 아래 레코드는 값만 줄마다 하나씩 나열하며, 들여쓰기가 중첩을 나타냅니다. 따옴표, 괄호, 콜론, 반복되는 키가 없어 같은 데이터에 JSON보다 훨씬 적은 토큰이 들므로 AI 모델에 알맞은 형식입니다.

내 데이터가 업로드되나요?

아니요. 편집기는 전부 브라우저에서 실행됩니다. 직접 내 서버로 웹훅을 설정하지 않는 한, 문서는 어떤 서버로도 보내지지 않습니다.

편집기는 참조 코드와 똑같이 SHLS를 읽나요?

네. 편집기는 SHLS 저장소의 SHLSDecoder와 SHLSEncoder와 똑같이 SHLS를 읽고 씁니다 - 변환 탭의 JSON은 Python 클래스가 내놓는 데이터입니다. 문서가 보이는 것과 다르게 읽히는 곳(값이 하나 모자란 레코드, 공백이 든 빈 줄)은 편집기가 줄 번호와 함께 문제로 나열합니다.

코드를 건드리지 않고 레코드를 편집할 수 있나요?

네. 가운데에서 값, 키 또는 섹션 이름을 클릭하고 입력한 뒤 Enter를 누르세요. 레코드 위의 버튼으로 레코드와 키를 추가, 복제, 이동, 삭제합니다. 키를 추가하거나 삭제하면 섹션의 모든 레코드에서 그 값이 생기거나 없어집니다. 각 변경은 실행 취소 한 번으로 되돌립니다.

SHLS는 토큰을 얼마나 아끼나요?

변환 탭은 문서를 SHLS로 썼을 때와 같은 데이터를 JSON으로 썼을 때의 대략적인 토큰 수를 셉니다. 레코드 표라면 키를 한 번만 쓰기 때문에 SHLS는 들여쓴 JSON 토큰의 절반도 들지 않는 경우가 많습니다.

JSON, YAML, CSV를 SHLS로 변환할 수 있나요?

네. .json, .yaml, .csv, .jsonl 파일을 열면 SHLSEncoder가 쓰는 방식대로 SHLS가 됩니다. SHLS가 담을 수 없는 것(빈 값, 줄 바꿈이 든 값)은 편집기가 알려 줍니다. 변환 탭과 내보내기는 JSON, YAML, CSV, JSON Lines, 일반 텍스트를 씁니다.

AI가 SHLS 편집기에서 쓸 수 있나요?

네, 어떤 AI든 됩니다 - ChatGPT, Claude, Gemini, Copilot 또는 코딩 도구의 AI. "AI 도우미", 이어서 "프롬프트 복사"를 클릭하세요: 프롬프트가 SHLS를 설명하므로 어떤 AI든 올바른 SHLS를 씁니다. AI가 링크로 답하면 클릭하세요. 문서가 편집기에 나타납니다. "실행 취소"로 모든 변경을 되돌릴 수 있습니다.

SHLS 편집기는 유료인가요?

아니요. 편집기는 무료이며 광고도 가입도 없습니다.