Code
1 / 1
Typst Editörü kodunuzu ve derlenmiş sayfaları yan yana gösterir. Gerçek Typst derleyicisini tarayıcınızda WebAssembly olarak çalıştırır; böylece sayfalar tam olarak PDF'teki gibi görünür - başlıklar, listeler, tablolar, formüller, şekiller, dipnotlar, referanslar ve kendi #set ve #show kurallarınız. Sayfadaki herhangi bir metne tıklamak sizi koddaki yerine götürür ve metni doğrudan sayfa üzerinde düzenleyebilirsiniz.
Her şey tarayıcınızda çalışır. Belgeler yüklenmez; kayıt ve reklam yoktur.
Kendi renklerinde işaretleme, kod, formüller, dizeler ve yorumlar, satır numaraları, Enter ile devam eden listeler ve satır, sütun ve ipucuyla derleyici hataları.
WebAssembly'ye derlenmiş Typst 0.14, editörün yanında bir worker içinde çalışır ve her değişiklikten kısa bir süre sonra derler - yazmak akıcı kalır.
Değiştirmek için sayfadaki metne tıklayın; değişiklik koda gider. Bir formüle veya resme tıklamak koddaki yerine atlar.
Kâğıt, kenar boşlukları, sütunlar, yazı tipi, boyut, dil, iki yana yaslı metin, numaralı başlıklar ve sayfa numaraları - ayarlar kodunuzdaki #set kurallarını düzenler.
Bir belgeye resimler, CSV, JSON, YAML, kaynakçalar, yazı tipleri ve diğer .typ dosyalarını ekleyin ve image, csv, json veya #import ile kullanın.
Derleyiciden gerçek, seçilebilir metinli bir PDF, her sayfa PNG, JPG, WebP veya SVG olarak ya da dosyalarıyla birlikte .typ kaynağı ZIP olarak.
Her https sayfası (ve localhost) editörü bir <iframe> ve ?embed=1 ile yerleştirebilir - kayıt yok, anahtar yok. Yerleştirildiğinde editör bu metni gizler ve bir Kaydet düğmesi gösterir. Belgeyi içeri almanın ve dışarı vermenin iki yolu vardır.
src= bir dosya açar (sunucunuz CORS'a izin vermelidir), webhook= ise "Kaydet"in (Ctrl+S) belgeyi o adrese göndermesini sağlar. Authorization: Bearer … başlığı için &token=…, her değişiklikten sonra kaydetmek için &auto ekleyin.
<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>Webhook, JSON içeren bir POST alır: { editor, event: "save", id, name, content, assets, updated }. Bunu saklayan küçük bir PHP betiği:
<?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}';Editör typsteditor:ready der, sayfanız typsteditor:load ile yanıt verir, editör typsteditor:loaded, gerçek düzenlemelerde typsteditor:change ve kullanıcı kaydettiğinde typsteditor:save bildirir. Sayfanız typsteditor:get (geçerli durum) veya typsteditor:save (Kaydet'e basma) gönderebilir. Kaydetme böylece kendi oturum açma ve oturum sisteminiz üzerinden yapılır.
<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') { // editör hazır: belgeyi ona verin
ed.contentWindow.postMessage({
type: 'typsteditor:load',
name: 'Flyer',
content: await (await fetch('/docs/flyer.typ')).text(),
assets: { 'logo.png': 'data:image/png;base64,…' } // isteğe bağlı resimler ve veri dosyaları
}, ORIGIN);
}
if (m.type === 'typsteditor:change') document.title = '● not saved'; // gerçek bir düzenleme
if (m.type === 'typsteditor:save') { // kullanıcı "Kaydet"e tıkladı
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';
}
});
// Kendi sayfanızda bir kaydet düğmesi: yanıt typsteditor:save olarak gelir
function saveNow() { ed.contentWindow.postMessage({ type: 'typsteditor:get' }, ORIGIN); }
</script>Sayfanızın içinde Yapay Zekâ Asistanı: çerçeve içinde de çalışır. iframe üzerinde allow="clipboard-write" ile "İstemi kopyala" panoyu doğrudan kullanır (aksi halde editör eski kopyalama komutuna geri döner veya istemi elle kopyalamanız için gösterir). Yapay zekânın gönderdiği bir bağlantı başka bir web sitesinin içindeki editöre ulaşamaz; bu yüzden editör, yapay zekâya ve kullanıcıya bunun yerine yapay zekânın yanıtının tamamını editöre yapıştırmasını söyler - veya editörü kendi penceresinde açın.
window.open("https://typst.giit.ch/?embed=window", "typsteditor-17") tam editörü kendi penceresinde açar ve aynı mesajları window.opener ile konuşur. Yapay zekâdan gelen bağlantılar ona orada ulaşır. typsteditor:load ayrıca context: { host, title, rules } taşıyabilir - yapay zekâ istemi bu durumda belgenin nereye ait olduğunu söyler ve kurallarınıza uyar - ve hook: { url, token, assets: false }, yalnızca bu belge için olan ve asla saklanmayan bir webhook. Kaydedilmemiş değişikliklerle pencereyi kapatmak typsteditor:closing gönderir. typsteditor:pdf sayfanın belgesinin PDF'ini ister ve onu Typst derleyicisinin gerçek, seçilebilir metinle oluşturduğu bir data URI olarak geri alır.
Editöre kendi isteminizi, sitenizde bir adresi ve bu editör oturumu için bir anahtarı verin. Yapay zekâ iletişim kutusu bu durumda sitenize "Bağlı" olduğunu, yapay zekâya ne söylediğinizi ve geçerli belgeyi değiştir veya yeni bir belge oluştur seçimini gösterir; İstemi kopyala hepsini bir araya getirir. Yapay zekâ sonucunu anahtarla sunucunuza gönderir ve sayfanız onu editörde açar - yeni bir belge ayrı açılır ve kullanıcının tarayıcısında kalır. Editör oturumu başına bir anahtar: editör açık olduğu sürece geçerli kalır ve editör yalnızca anahtarı yokken typsteditor:key-request ile ister. Editör anahtarı asla kendisi göndermez ve asla saklamaz; adres kendi alan adınızda veya onun bir alt alan adında https olmalıdır.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // editör oturumu başına bir anahtar
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 içindeki id'yi hatırlayın ve başka id'li change/save/closing mesajlarını yok sayın
// yalnızca editörün anahtarı yokken:
if (m.type === 'typsteditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'typsteditor:ai', key: k.key }, ORIGIN); }
// editör açıkken sunucunuza her dakika bildirin; editörü veya sayfayı kapatmak anahtarı geçersiz kılar
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// sunucunuzda bir sonuç var (polling, SSE …): target "current" veya "new" olur
ed.contentWindow.postMessage({ type: 'typsteditor:load', name: 'Flyer', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - oturum açmış kullanıcının bu editör oturumuna ait anahtar (sayfanız çağırır)
session_start(); // kullanıcının bu belgeyi düzenleyebileceğini kontrol edin
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // veya veritabanınızda; ?alive= seen değerini yeniden ayarlar
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - yapay zekâ buraya gönderir (CORS başlıkları yok: yapay zekâlar bunu bir sunucudan çağırır)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // veritabanınız: geçersiz kılınmamış, son 3 dakikada görülmüş
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'); // sayfanız bunu typsteditor:load ile gösterir
echo '{"ok":true}';Anahtarları en az 128 rastgele bitle oluşturun, yalnızca özetlerini (hash) saklayın, her birini oturum açmış kullanıcıya, belgeye ve bu editör oturumuna bağlayın, oturum başına bir tane oluşturun, yalnızca sayfanız oturumu açık bildirdiği sürece geçerli tutun ve editör veya sayfa kapandığında geçersiz kılın.
Protokolün tamamı llms.txt dosyasındadır - bir yapay zekâya verin, sisteminiz için bağlantıyı o kursun. LaTeX Editörü latexeditor: önekiyle aynı şekilde çalışır - latex.giit.ch.
Hayır. Editör ve Typst derleyicisi tamamen tarayıcınızda çalışır. Kendi sunucunuza bir webhook kurmadığınız sürece belgeleriniz, resimleriniz ve dosyalarınız asla bir sunucuya gönderilmez.
Evet. Editör WebAssembly'ye derlenmiş Typst 0.14'ü (typst.ts) çalıştırır; böylece sayfalar ve PDF, Typst komut satırıyla elde edilenlerle aynıdır. Bir kez yüklenir (yaklaşık 11 MB) ve sonra tarayıcınızda saklanır.
"Dışa aktar"a tıklayın, PDF'i seçin ve "İndir"e tıklayın. PDF doğrudan Typst derleyicisinden gelir; seçilebilir ve aranabilir gerçek metin içerir.
Doğrudan değil: editör başka sunuculardan hiçbir şey yüklemez, bu yüzden #import "@preview/…" paketin adını belirten bir sorun bildirir. Bir paketin .typ dosyalarını Resimler sekmesinde belgeye ekleyebilir ve dosya adlarıyla içe aktarabilirsiniz.
Typst'in getirdiği yazı tipleri: Libertinus Serif (varsayılan), New Computer Modern ve onun formül yazı tipi, kod için DejaVu Sans Mono. Kendi .otf veya .ttf dosyalarınızı bir belgeye ekleyin ve #set text(font: "Name") ile kullanın.
Bir resmi editöre sürükleyin veya yapıştırın ya da sağdaki Resimler sekmesinde ekleyin. Tarayıcınızda belgeyle birlikte saklanır ve #image("name.png") ile kullanılır. CSV, JSON, YAML ve .bib dosyaları da aynı şekilde çalışır.
Evet, her yapay zekâ - ChatGPT, Claude, Gemini, Copilot veya kodlama aracınızdaki yapay zekâ. "Yapay Zekâ Asistanı"na, ardından "İstemi kopyala"ya tıklayın, istemi yapay zekânıza yapıştırın ve ne yazması gerektiğini söyleyin. Yapay zekâ bir bağlantıyla yanıt verir; ona tıklayın, belge editörünüzde görünür. "Geri al" her değişikliği geri alır.
Evet. Bir iframe ile yerleştirin ve belgeleri postMessage ile alıp verin ya da kaydedilen her sürümü bir webhook ile sunucunuza göndermesine izin verin. Örnekler için Editörü kendi web sitenizde kullanın bölümüne bakın.
Hayır. Editör ücretsizdir; reklam ve kayıt yoktur.