Code
1 / 1
De Typst-editor toont je code en de gecompileerde pagina's naast elkaar. Hij draait de echte Typst-compiler als WebAssembly in je browser, dus de pagina's zien er precies zo uit als in de PDF - koppen, lijsten, tabellen, formules, figuren, voetnoten, verwijzingen en je eigen #set- en #show-regels. Een klik op een tekst op de pagina brengt je naar de plek in de code, en je kunt de tekst direct op de pagina bewerken.
Alles draait in je browser. Documenten worden niet geüpload, er is geen registratie en geen reclame.
Opmaak, code, formules, strings en commentaar in eigen kleuren, regelnummers, lijsten die bij Enter doorlopen, en de fouten van de compiler met regel, kolom en tip.
Typst 0.14, gecompileerd naar WebAssembly, draait in een worker naast de editor en compileert kort na elke wijziging - typen blijft soepel.
Klik op tekst op de pagina om hem daar te wijzigen; de wijziging gaat in de code. Een klik op een formule of een afbeelding springt naar de plek in de code.
Papier, marges, kolommen, lettertype, grootte, taal, uitgevulde tekst, genummerde koppen en paginanummers - de instellingen bewerken de #set-regels van je code.
Voeg afbeeldingen, CSV, JSON, YAML, literatuurlijsten, lettertypen en andere .typ-bestanden aan een document toe en gebruik ze met image, csv, json of #import.
Een PDF van de compiler met echte, selecteerbare tekst, elke pagina als PNG, JPG, WebP of SVG, of de .typ-bron met de bestanden als ZIP.
Elke https-pagina (en localhost) kan de editor insluiten met een <iframe> en ?embed=1 - geen registratie, geen sleutel. Ingesloten verbergt de editor deze tekst en toont hij een knop Opslaan. Er zijn twee manieren om het document erin en eruit te krijgen.
src= opent een bestand (je server moet CORS toestaan), webhook= zorgt dat "Opslaan" (Ctrl+S) het document naar dat adres stuurt. Voeg &token=… toe voor een header Authorization: Bearer … en &auto om na elke wijziging op te slaan.
<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>De webhook krijgt een POST met JSON { editor, event: "save", id, name, content, assets, updated }. Een klein PHP-script dat het opslaat:
<?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}';De editor zegt typsteditor:ready, je pagina antwoordt met typsteditor:load, de editor meldt typsteditor:loaded, typsteditor:change bij echte bewerkingen en typsteditor:save wanneer de gebruiker opslaat. Je pagina mag typsteditor:get (de huidige toestand) of typsteditor:save (op Opslaan drukken) sturen. Opslaan loopt dan via je eigen login en sessie.
<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') { // de editor is klaar: geef hem het document
ed.contentWindow.postMessage({
type: 'typsteditor:load',
name: 'Flyer',
content: await (await fetch('/docs/flyer.typ')).text(),
assets: { 'logo.png': 'data:image/png;base64,…' } // afbeeldingen en gegevensbestanden, optioneel
}, ORIGIN);
}
if (m.type === 'typsteditor:change') document.title = '● not saved'; // een echte bewerking
if (m.type === 'typsteditor:save') { // de gebruiker klikte op "Opslaan"
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';
}
});
// Een opslaanknop op je eigen pagina: het antwoord komt als typsteditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'typsteditor:get' }, ORIGIN); }
</script>AI-assistent binnen je pagina: die werkt ook in het frame. Met allow="clipboard-write" op het iframe gebruikt "Prompt kopiëren" direct het klembord (anders valt de editor terug op het oude kopieercommando, of toont hij de prompt om met de hand te kopiëren). Een link die de AI stuurt, kan een editor binnen een andere website niet bereiken, dus vraagt de editor de AI en de gebruiker om in plaats daarvan het hele antwoord van de AI in de editor te plakken - of de editor in een eigen venster te openen.
window.open("https://typst.giit.ch/?embed=window", "typsteditor-17") opent de volledige editor in een eigen venster en spreekt dezelfde berichten met window.opener. Links van een AI bereiken hem daar. typsteditor:load kan ook context: { host, title, rules } meegeven - de AI-prompt zegt dan waar het document thuishoort en volgt je regels - en hook: { url, token, assets: false }, een webhook alleen voor dit document die nooit wordt opgeslagen. Als het venster met niet-opgeslagen wijzigingen wordt gesloten, stuurt het typsteditor:closing. typsteditor:pdf vraagt om de PDF van het document van de pagina en krijgt die terug als data-URI, gemaakt door de Typst-compiler met echte, selecteerbare tekst.
Geef de editor je eigen prompt, een adres op je site en een sleutel voor deze editorsessie. Het AI-venster toont dan "Verbonden met" je site, wat je de AI vertelt, en de keuze het huidige document wijzigen of een nieuw maken; Prompt kopiëren zet alles bij elkaar. De AI post het resultaat met de sleutel naar je server, en je pagina opent het in de editor - een nieuw document opent apart en blijft in de browser van de gebruiker. Eén sleutel per editorsessie: hij blijft geldig zolang de editor open is, en alleen zolang de editor er geen heeft, vraagt hij erom met typsteditor:key-request. De editor verstuurt de sleutel nooit zelf en slaat hem nooit op; het adres moet https zijn op je eigen host of een subdomein ervan.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // één sleutel per editorsessie
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);
// onthoud de id uit typsteditor:loaded en negeer change/save/closing met een andere id
// alleen zolang de editor geen sleutel heeft:
if (m.type === 'typsteditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'typsteditor:ai', key: k.key }, ORIGIN); }
// zolang de editor open is, meld het elke minuut aan je server; het sluiten van de editor of de pagina maakt de sleutel ongeldig
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// je server heeft een resultaat (polling, SSE …): target is "current" of "new"
ed.contentWindow.postMessage({ type: 'typsteditor:load', name: 'Flyer', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - de sleutel van deze editorsessie van de ingelogde gebruiker (je pagina roept het aan)
session_start(); // controleer of de gebruiker dit document mag bewerken
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // of in je database; ?alive= zet seen opnieuw
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - de AI post hierheen (geen CORS-headers: AI's roepen het aan vanaf een server)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // je database: niet ongeldig gemaakt, gezien in de laatste 3 minuten
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'); // je pagina toont het met typsteditor:load
echo '{"ok":true}';Maak sleutels met minstens 128 willekeurige bits, sla alleen hun hash op, koppel elke sleutel aan de ingelogde gebruiker, het document en deze editorsessie, maak er één per sessie, houd hem alleen geldig zolang je pagina de sessie als open meldt, en maak hem ongeldig wanneer de editor of de pagina sluit.
Het hele protocol staat in llms.txt - geef het aan een AI en die bouwt de koppeling voor je systeem. De LaTeX-editor werkt op dezelfde manier met het voorvoegsel latexeditor: - latex.giit.ch.
Nee. De editor en de Typst-compiler draaien volledig in je browser. Je documenten, afbeeldingen en bestanden worden nooit naar een server gestuurd, tenzij je zelf een webhook naar je eigen server instelt.
Ja. De editor draait Typst 0.14, gecompileerd naar WebAssembly (typst.ts), dus de pagina's en de PDF zijn dezelfde als met de Typst-opdrachtregel. Hij wordt één keer geladen (ongeveer 11 MB) en daarna door je browser bewaard.
Klik op "Exporteren", kies PDF en klik op "Downloaden". De PDF komt rechtstreeks van de Typst-compiler, met echte tekst die je kunt selecteren en doorzoeken.
Niet direct: de editor laadt niets van andere servers, dus #import "@preview/…" meldt een probleem dat het pakket noemt. Je kunt de .typ-bestanden van een pakket in het tabblad Afbeeldingen aan het document toevoegen en ze op bestandsnaam importeren.
De lettertypen die Typst meelevert: Libertinus Serif (de standaard), New Computer Modern en het bijbehorende formulelettertype, en DejaVu Sans Mono voor code. Voeg je eigen .otf- of .ttf-bestanden aan een document toe en gebruik ze met #set text(font: "Name").
Sleep of plak een afbeelding in de editor, of voeg haar toe in het tabblad Afbeeldingen rechts. Ze wordt met het document in je browser bewaard en gebruikt door #image("name.png"). CSV-, JSON-, YAML- en .bib-bestanden werken op dezelfde manier.
Ja, elke AI - ChatGPT, Claude, Gemini, Copilot of de AI in je programmeertool. Klik op "AI-assistent", dan op "Prompt kopiëren", plak hem in je AI en zeg wat die moet schrijven. De AI antwoordt met een link; klik erop en het document verschijnt in je editor. "Ongedaan maken" draait elke wijziging terug.
Ja. Sluit hem in met een iframe en wissel documenten uit met postMessage, of laat hem elke opgeslagen versie met een webhook naar je server sturen. Zie De editor op je eigen website gebruiken voor voorbeelden.
Nee. De editor is gratis, zonder reclame en zonder registratie.