Code
1 / 1
Der Typst-Editor zeigt deinen Code und die kompilierten Seiten nebeneinander. Er führt den echten Typst-Compiler als WebAssembly in deinem Browser aus, darum sehen die Seiten genau so aus wie im PDF - Überschriften, Listen, Tabellen, Formeln, Abbildungen, Fussnoten, Verweise und deine eigenen #set- und #show-Regeln. Ein Klick auf einen Text auf der Seite bringt dich an seine Stelle im Code, und du kannst den Text direkt auf der Seite bearbeiten.
Alles läuft in deinem Browser. Dokumente werden nicht hochgeladen, es gibt keine Anmeldung und keine Werbung.
Markup, Code, Formeln, Strings und Kommentare in eigenen Farben, Zeilennummern, Listen, die bei Enter weitergehen, und die Fehler des Compilers mit Zeile, Spalte und Hinweis.
Typst 0.14, nach WebAssembly kompiliert, läuft in einem Worker neben dem Editor und kompiliert einen Moment nach jeder Änderung - das Tippen bleibt flüssig.
Klicke Text auf der Seite an, um ihn dort zu ändern; die Änderung kommt in den Code. Ein Klick auf eine Formel oder ein Bild springt an seine Stelle im Code.
Papier, Ränder, Spalten, Schrift, Grösse, Sprache, Blocksatz, nummerierte Überschriften und Seitenzahlen - die Einstellungen bearbeiten die #set-Regeln deines Codes.
Füge einem Dokument Bilder, CSV, JSON, YAML, Literaturverzeichnisse, Schriften und weitere .typ-Dateien hinzu und nutze sie mit image, csv, json oder #import.
Ein PDF aus dem Compiler mit echtem, markierbarem Text, jede Seite als PNG, JPG, WebP oder SVG, oder der .typ-Quelltext mit seinen Dateien als ZIP.
Jede https-Seite (und localhost) kann den Editor mit einem <iframe> und ?embed=1 einbetten - ohne Anmeldung, ohne Schlüssel. Eingebettet blendet der Editor diesen Text aus und zeigt einen Speichern-Knopf. Das Dokument kommt auf zwei Arten hinein und wieder heraus.
src= öffnet eine Datei (dein Server muss CORS erlauben), webhook= lässt «Speichern» (Ctrl+S) das Dokument an diese Adresse senden. Füge &token=… für einen Authorization: Bearer …-Header hinzu und &auto, um nach jeder Änderung zu speichern.
<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>Der Webhook erhält einen POST mit JSON { editor, event: "save", id, name, content, assets, updated }. Ein kleines PHP-Skript, das ihn speichert:
<?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}';Der Editor meldet typsteditor:ready, deine Seite antwortet mit typsteditor:load, der Editor meldet typsteditor:loaded, typsteditor:change bei echten Änderungen und typsteditor:save, wenn gespeichert wird. Deine Seite kann typsteditor:get (den aktuellen Stand) oder typsteditor:save (Speichern drücken) senden. Gespeichert wird dann über dein eigenes Login und deine eigene Sitzung.
<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') { // der Editor ist bereit: ihm das Dokument geben
ed.contentWindow.postMessage({
type: 'typsteditor:load',
name: 'Flyer',
content: await (await fetch('/docs/flyer.typ')).text(),
assets: { 'logo.png': 'data:image/png;base64,…' } // Bilder und Datendateien, optional
}, ORIGIN);
}
if (m.type === 'typsteditor:change') document.title = '● not saved'; // eine echte Änderung
if (m.type === 'typsteditor:save') { // es wurde auf "Speichern" geklickt
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';
}
});
// Ein Speichern-Knopf auf deiner eigenen Seite: die Antwort kommt als typsteditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'typsteditor:get' }, ORIGIN); }
</script>KI-Assistent in deiner Seite: Er funktioniert auch im Frame. Mit allow="clipboard-write" am iframe nutzt «Prompt kopieren» direkt die Zwischenablage (sonst greift der Editor auf den alten Kopierbefehl zurück oder zeigt den Prompt zum Kopieren von Hand). Ein Link der KI erreicht keinen Editor in einer anderen Website, darum sagt der Editor der KI und dir, die ganze Antwort der KI stattdessen in den Editor einzufügen - oder den Editor in einem eigenen Fenster zu öffnen.
window.open("https://typst.giit.ch/?embed=window", "typsteditor-17") öffnet den vollen Editor in einem eigenen Fenster, das dieselben Meldungen mit window.opener austauscht. Links einer KI erreichen ihn dort. typsteditor:load kann auch context: { host, title, rules } mitgeben - der KI-Prompt sagt dann, wohin das Dokument gehört, und befolgt deine Regeln - sowie hook: { url, token, assets: false }, einen Webhook nur für dieses Dokument, der nie gespeichert wird. Wird das Fenster mit ungespeicherten Änderungen geschlossen, kommt typsteditor:closing. typsteditor:pdf verlangt das PDF des Dokuments der Seite und erhält es als data-URI zurück, erzeugt vom Typst-Compiler mit echtem, markierbarem Text.
Gib dem Editor deinen eigenen Prompt, eine Adresse auf deiner Website und einen Schlüssel für diese Editor-Sitzung. Der KI-Dialog zeigt dann «Verbunden mit» deiner Website, was du der KI sagst, und die Wahl das aktuelle Dokument ändern oder ein neues erstellen; Prompt kopieren setzt alles zusammen. Die KI sendet ihr Ergebnis mit dem Schlüssel an deinen Server, und deine Seite öffnet es im Editor - ein neues Dokument öffnet sich separat und bleibt im Browser der Person, die schreibt. Ein Schlüssel pro Editor-Sitzung: Er bleibt gültig, solange der Editor offen ist, und nur solange er keinen hat, fragt der Editor mit typsteditor:key-request danach. Der Editor sendet den Schlüssel selbst nie und speichert ihn nie; die Adresse muss https auf deinem eigenen Host oder einer Subdomain davon sein.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // ein Schlüssel pro Editor-Sitzung
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);
// die id aus typsteditor:loaded merken und change/save/closing mit anderer id ignorieren
// nur solange der Editor keinen Schlüssel hat:
if (m.type === 'typsteditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'typsteditor:ai', key: k.key }, ORIGIN); }
// solange der Editor offen ist, jede Minute deinem Server melden; Schliessen des Editors oder der Seite macht den Schlüssel ungültig
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// dein Server hat ein Ergebnis (Polling, SSE …): target ist "current" oder "new"
ed.contentWindow.postMessage({ type: 'typsteditor:load', name: 'Flyer', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - der Schlüssel dieser Editor-Sitzung der angemeldeten Person (deine Seite ruft es auf)
session_start(); // prüfen, ob die Person dieses Dokument bearbeiten darf
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // oder in deiner Datenbank; ?alive= setzt seen neu
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - die KI sendet hierher (keine CORS-Header: KIs rufen es von einem Server auf)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // deine Datenbank: nicht ungültig, in den letzten 3 Minuten gesehen
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'); // deine Seite zeigt es mit typsteditor:load
echo '{"ok":true}';Erzeuge Schlüssel mit mindestens 128 Zufallsbits, speichere nur ihren Hash, binde jeden an die angemeldete Person, das Dokument und diese Editor-Sitzung, erzeuge einen pro Sitzung, lass ihn nur gültig, solange deine Seite die Sitzung als offen meldet, und mach ihn ungültig, wenn der Editor oder die Seite schliesst.
Das ganze Protokoll steht in llms.txt - gib es einer KI, und sie baut die Anbindung für dein System. Der LaTeX-Editor funktioniert gleich, mit dem Präfix latexeditor: - latex.giit.ch.
Nein. Der Editor und der Typst-Compiler laufen ganz in deinem Browser. Deine Dokumente, Bilder und Dateien werden nie an einen Server gesendet, ausser du richtest selbst einen Webhook zu deinem eigenen Server ein.
Ja. Der Editor führt Typst 0.14 als WebAssembly aus (typst.ts), darum sind die Seiten und das PDF dieselben wie mit der Typst-Kommandozeile. Er wird einmal geladen (etwa 11 MB) und dann von deinem Browser behalten.
Klicke auf «Exportieren», wähle PDF und klicke auf «Herunterladen». Das PDF kommt direkt aus dem Typst-Compiler, mit echtem Text, der sich markieren und durchsuchen lässt.
Nicht direkt: Der Editor lädt nichts von anderen Servern, darum meldet #import "@preview/…" ein Problem, das das Paket nennt. Du kannst die .typ-Dateien eines Pakets im Tab «Bilder» zum Dokument hinzufügen und sie über den Dateinamen importieren.
Die Schriften, die Typst mitbringt: Libertinus Serif (die Standardschrift), New Computer Modern und seine Formelschrift sowie DejaVu Sans Mono für Code. Füge einem Dokument eigene .otf- oder .ttf-Dateien hinzu und nutze sie mit #set text(font: "Name").
Zieh ein Bild in den Editor oder füge es ein, oder füge es rechts im Tab «Bilder» hinzu. Es wird mit dem Dokument in deinem Browser gespeichert und von #image("name.png") verwendet. CSV-, JSON-, YAML- und .bib-Dateien funktionieren genauso.
Ja, jede KI - ChatGPT, Claude, Gemini, Copilot oder die KI in deinem Programmier-Tool. Klicke auf «KI-Assistent», dann auf «Prompt kopieren», füge ihn in deine KI ein und sag, was sie schreiben soll. Die KI antwortet mit einem Link; klickst du ihn an, erscheint das Dokument in deinem Editor. «Rückgängig» nimmt jede Änderung zurück.
Ja. Bette ihn mit einem iframe ein und tausche Dokumente per postMessage aus, oder lass ihn jede gespeicherte Fassung per Webhook an deinen Server senden. Beispiele findest du unter Den Editor auf deiner eigenen Website nutzen.
Nein. Der Editor ist kostenlos, ohne Werbung und ohne Anmeldung.