Code
1 / 1
Typst 편집기는 코드와 컴파일된 페이지를 나란히 보여 줍니다. 실제 Typst 컴파일러를 WebAssembly로 브라우저에서 실행하므로, 페이지는 PDF와 똑같이 보입니다 - 제목, 목록, 표, 수식, 도판, 각주, 상호 참조, 그리고 직접 만든 #set과 #show 규칙까지. 페이지의 텍스트를 클릭하면 코드의 해당 위치로 이동하며, 페이지에서 바로 텍스트를 편집할 수도 있습니다.
모든 것이 브라우저에서 실행됩니다. 문서는 업로드되지 않으며 가입도 광고도 없습니다.
마크업, 코드, 수식, 문자열, 주석이 각각의 색으로 표시되고, 줄 번호, Enter로 이어지는 목록, 줄, 열, 힌트가 붙은 컴파일러 오류가 있습니다.
WebAssembly로 컴파일된 Typst 0.14가 편집기 옆의 워커에서 실행되어 변경할 때마다 잠시 뒤 컴파일합니다 - 입력은 부드럽게 유지됩니다.
페이지의 텍스트를 클릭해 그 자리에서 바꾸세요. 변경은 코드에 들어갑니다. 수식이나 그림을 클릭하면 코드의 해당 위치로 이동합니다.
용지, 여백, 단, 글꼴, 크기, 언어, 양쪽 정렬, 번호 붙은 제목, 쪽 번호 - 설정은 코드의 #set 규칙을 편집합니다.
문서에 그림, CSV, JSON, YAML, 참고 문헌, 글꼴, 다른 .typ 파일을 추가하고 image, csv, json 또는 #import로 사용하세요.
선택할 수 있는 실제 텍스트가 담긴 컴파일러의 PDF, 모든 페이지를 PNG, JPG, WebP 또는 SVG로, 또는 파일이 포함된 .typ 소스 ZIP.
모든 https 페이지(와 localhost)는 <iframe>과 ?embed=1로 편집기를 삽입할 수 있습니다 - 가입도 키도 필요 없습니다. 삽입되면 편집기는 이 텍스트를 숨기고 저장 버튼을 보여 줍니다. 문서를 넣고 빼는 방법은 두 가지입니다.
src=는 파일을 열고(서버가 CORS를 허용해야 합니다), webhook=은 "저장"(Ctrl+S) 시 문서를 그 주소로 보내게 합니다. Authorization: Bearer … 헤더를 쓰려면 &token=…을, 변경할 때마다 저장하려면 &auto를 추가하세요.
<iframe src="https://typst.giit.ch/?embed=1&src=https://your-site.com/docs/flyer.typ&webhook=https://your-site.com/save.php"
allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>웹훅은 JSON { editor, event: "save", id, name, content, assets, updated }이 담긴 POST를 받습니다. 이를 저장하는 작은 PHP 스크립트:
<?php
header('Access-Control-Allow-Origin: https://typst.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__ . "/docs/$name.typ", $d['content']);
echo '{"ok":true}';편집기가 typsteditor:ready를 보내면 페이지는 typsteditor:load로 답하고, 편집기는 typsteditor:loaded, 실제 편집 시 typsteditor:change, 사용자가 저장할 때 typsteditor:save를 알립니다. 페이지는 typsteditor:get(현재 상태)이나 typsteditor:save(저장 누르기)를 보낼 수 있습니다. 그러면 저장은 내 로그인과 세션을 거칩니다.
<iframe id="ed" src="https://typst.giit.ch/?embed=1" allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>
<script>
const ed = document.getElementById('ed');
const ORIGIN = 'https://typst.giit.ch';
addEventListener('message', async e => {
if (e.source !== ed.contentWindow || e.origin !== ORIGIN) return;
const m = e.data;
if (m.type === 'typsteditor:ready') { // 편집기가 준비됨: 문서를 넘깁니다
ed.contentWindow.postMessage({
type: 'typsteditor:load',
name: 'Flyer',
content: await (await fetch('/docs/flyer.typ')).text(),
assets: { 'logo.png': 'data:image/png;base64,…' } // 선택 사항: 그림과 데이터 파일
}, ORIGIN);
}
if (m.type === 'typsteditor:change') document.title = '● not saved'; // 실제 편집
if (m.type === 'typsteditor:save') { // 사용자가 "Save"를 클릭함
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content, assets: m.assets }) });
document.title = 'Saved';
}
});
// 내 페이지의 저장 버튼: 응답은 typsteditor:save로 옵니다
function saveNow() { ed.contentWindow.postMessage({ type: 'typsteditor:get' }, ORIGIN); }
</script>내 페이지 안의 AI 도우미: 프레임 안에서도 작동합니다. iframe에 allow="clipboard-write"가 있으면 "프롬프트 복사"가 클립보드를 직접 사용합니다(없으면 편집기가 예전 복사 명령을 쓰거나 손으로 복사할 프롬프트를 보여 줍니다). AI가 보낸 링크는 다른 웹사이트 안의 편집기에 닿을 수 없으므로, 편집기는 AI와 사용자에게 AI의 답변 전체를 편집기에 붙여 넣거나 편집기를 별도의 창으로 열라고 안내합니다.
window.open("https://typst.giit.ch/?embed=window", "typsteditor-17")은 전체 편집기를 별도의 창으로 열고 window.opener와 같은 메시지를 주고받습니다. AI의 링크는 그 창에 닿습니다. typsteditor:load에는 context: { host, title, rules }도 담을 수 있으며(그러면 AI 프롬프트가 문서의 소속을 알리고 내 규칙을 따릅니다), hook: { url, token, assets: false }, 즉 저장되지 않는 이 문서 전용 웹훅도 담을 수 있습니다. 저장하지 않은 변경이 있는 채로 창을 닫으면 typsteditor:closing을 보냅니다. typsteditor:pdf는 페이지 문서의 PDF를 요청하며, Typst 컴파일러가 선택할 수 있는 실제 텍스트로 만든 PDF를 데이터 URI로 돌려받습니다.
편집기에 내 프롬프트, 내 사이트의 주소, 이 편집기 세션용 키를 넘기세요. 그러면 AI 대화 상자에 내 사이트와 "연결됨", AI에게 전하는 내용, 현재 문서 변경 또는 새 문서 만들기 선택이 표시되고, 프롬프트 복사가 이를 모두 합칩니다. AI는 결과를 키와 함께 내 서버로 POST하고, 페이지가 이를 편집기에서 엽니다. 새 문서는 따로 열리며 사용자의 브라우저에 남습니다. 편집기 세션당 키 하나: 편집기가 열려 있는 동안 유효하며, 키가 없을 때만 편집기가 typsteditor:key-request로 요청합니다. 편집기는 키를 직접 보내거나 저장하지 않습니다. 주소는 내 호스트나 그 하위 도메인의 https여야 합니다.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // 편집기 세션당 키 하나
const k = await key();
ed.contentWindow.postMessage({ type: 'typsteditor:load', name: 'Flyer', content, ai: {
label: 'My Site', prompt: 'Keep the [[placeholders]]. Write in German.',
endpoint: 'https://your-site.com/api/ai-result.php', key: k.key } }, ORIGIN);
// typsteditor:loaded의 id를 기억하고 id가 다른 change/save/closing은 무시
// 편집기에 키가 없을 때만:
if (m.type === 'typsteditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'typsteditor: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: 'typsteditor:load', name: 'Flyer', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - 로그인한 사용자의 이 편집기 세션 키 (페이지가 호출)
session_start(); // 사용자가 이 문서를 편집할 수 있는지 확인
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // 또는 데이터베이스에. ?alive=가 seen을 다시 설정
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - AI가 여기로 POST (CORS 헤더 없음: AI는 서버에서 호출)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // 데이터베이스: 무효가 아니고 최근 3분 안에 확인된 키
if (!$row) { http_response_code(401); exit('{"ok":false,"error":"key not valid"}'); }
$d = json_decode(file_get_contents('php://input', false, null, 0, 2000000), true);
save_draft($row['doc'], $d['content'], $d['target'] === 'new' ? 'new' : 'current'); // 페이지가 typsteditor:load로 표시
echo '{"ok":true}';키는 최소 128비트의 무작위 값으로 만들고, 해시만 저장하고, 각각을 로그인한 사용자, 문서, 이 편집기 세션에 묶고, 세션마다 하나씩 만들고, 페이지가 세션이 열려 있다고 알리는 동안만 유효하게 하며, 편집기나 페이지가 닫히면 무효로 하세요.
전체 프로토콜은 llms.txt에 있습니다 - AI에게 주면 내 시스템에 맞는 연결을 만들어 줍니다. LaTeX 편집기도 접두사 latexeditor:로 똑같이 작동합니다 - latex.giit.ch.
아니요. 편집기와 Typst 컴파일러는 전부 브라우저에서 실행됩니다. 직접 내 서버로 웹훅을 설정하지 않는 한, 문서, 그림, 파일은 어떤 서버로도 보내지지 않습니다.
네. 편집기는 WebAssembly로 컴파일된 Typst 0.14(typst.ts)를 실행하므로 페이지와 PDF가 Typst 명령줄과 같습니다. 한 번 불러오면(약 11 MB) 브라우저가 보관합니다.
"내보내기"를 클릭하고 PDF를 고른 뒤 "다운로드"를 클릭하세요. PDF는 Typst 컴파일러에서 바로 나오며, 선택하고 검색할 수 있는 실제 텍스트가 들어 있습니다.
직접은 안 됩니다: 편집기는 다른 서버에서 아무것도 불러오지 않으므로 #import "@preview/…"는 패키지 이름이 담긴 문제로 보고됩니다. 패키지의 .typ 파일을 그림 탭에서 문서에 추가하고 파일 이름으로 가져올 수 있습니다.
Typst에 포함된 글꼴: Libertinus Serif(기본값), New Computer Modern과 그 수식 글꼴, 코드용 DejaVu Sans Mono. 내 .otf나 .ttf 파일을 문서에 추가하고 #set text(font: "Name")으로 사용하세요.
그림을 편집기로 끌어다 놓거나 붙여 넣거나, 오른쪽 그림 탭에서 추가하세요. 그림은 문서와 함께 브라우저에 저장되며 #image("name.png")로 사용합니다. CSV, JSON, YAML, .bib 파일도 똑같이 작동합니다.
네, 어떤 AI든 됩니다 - ChatGPT, Claude, Gemini, Copilot 또는 코딩 도구의 AI. "AI 도우미", 이어서 "프롬프트 복사"를 클릭하고 AI에 붙여 넣은 뒤 무엇을 쓸지 말해 주세요. AI가 링크로 답하면 클릭하세요. 문서가 편집기에 나타납니다. "실행 취소"로 모든 변경을 되돌릴 수 있습니다.
네. iframe으로 삽입하고 postMessage로 문서를 주고받거나, 저장한 모든 버전을 웹훅으로 내 서버에 보내게 하세요. 예제는 내 웹사이트에서 편집기 사용하기를 보세요.
아니요. 편집기는 무료이며 광고도 가입도 없습니다.