Code
1 / 1
L’éditeur Typst affiche votre code et les pages compilées côte à côte. Il fait tourner le vrai compilateur Typst dans votre navigateur en WebAssembly, si bien que les pages ressemblent exactement à celles du PDF - titres, listes, tableaux, formules, figures, notes de bas de page, renvois et vos propres règles #set et #show. Un clic sur n’importe quel texte de la page vous mène à sa place dans le code, et vous pouvez modifier le texte directement sur la page.
Tout fonctionne dans votre navigateur. Les documents ne sont pas envoyés, il n’y a ni inscription ni publicité.
Balisage, code, formules, chaînes et commentaires dans leurs propres couleurs, numéros de ligne, listes qui se poursuivent avec Entrée, et les erreurs du compilateur avec ligne, colonne et indication.
Typst 0.14 compilé en WebAssembly tourne dans un worker à côté de l’éditeur et compile un instant après chaque modification - la saisie reste fluide.
Cliquez sur un texte de la page pour le modifier sur place ; la modification va dans le code. Un clic sur une formule ou une image mène à sa place dans le code.
Papier, marges, colonnes, police, taille, langue, texte justifié, titres numérotés et numéros de page - les réglages modifient les règles #set de votre code.
Ajoutez des images, du CSV, du JSON, du YAML, des bibliographies, des polices et d’autres fichiers .typ à un document et utilisez-les avec image, csv, json ou #import.
Un PDF du compilateur avec du vrai texte sélectionnable, chaque page en PNG, JPG, WebP ou SVG, ou la source .typ avec ses fichiers en ZIP.
Toute page https (et localhost) peut intégrer l’éditeur avec une <iframe> et ?embed=1 - sans inscription, sans clé. Intégré, l’éditeur masque ce texte et affiche un bouton Enregistrer. Il y a deux façons de faire entrer et sortir le document.
src= ouvre un fichier (votre serveur doit autoriser CORS), webhook= fait envoyer le document à cette adresse par « Enregistrer » (Ctrl+S). Ajoutez &token=… pour un en-tête Authorization: Bearer … et &auto pour enregistrer après chaque modification.
<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>Le webhook reçoit un POST avec du JSON { editor, event: "save", id, name, content, assets, updated }. Un petit script PHP qui l’enregistre :
<?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}';L’éditeur annonce typsteditor:ready, votre page répond par typsteditor:load, l’éditeur signale typsteditor:loaded, typsteditor:change lors de vraies modifications et typsteditor:save quand l’utilisateur enregistre. Votre page peut envoyer typsteditor:get (l’état actuel) ou typsteditor:save (appuyer sur Enregistrer). L’enregistrement passe alors par votre propre connexion et votre propre session.
<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') { // l’éditeur est prêt : on lui transmet le document
ed.contentWindow.postMessage({
type: 'typsteditor:load',
name: 'Flyer',
content: await (await fetch('/docs/flyer.typ')).text(),
assets: { 'logo.png': 'data:image/png;base64,…' } // images et fichiers de données facultatifs
}, ORIGIN);
}
if (m.type === 'typsteditor:change') document.title = '● not saved'; // une vraie modification
if (m.type === 'typsteditor:save') { // l’utilisateur a cliqué sur "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';
}
});
// Un bouton d’enregistrement sur votre propre page : la réponse arrive sous forme de typsteditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'typsteditor:get' }, ORIGIN); }
</script>L’assistant IA dans votre page : il fonctionne aussi dans le cadre. Avec allow="clipboard-write" sur l’iframe, « Copier le prompt » utilise directement le presse-papiers (sinon l’éditeur se rabat sur l’ancienne commande de copie, ou affiche le prompt à copier à la main). Un lien envoyé par l’IA ne peut pas atteindre un éditeur intégré dans un autre site web : l’éditeur demande donc à l’IA et à l’utilisateur de coller toute la réponse de l’IA dans l’éditeur - ou d’ouvrir l’éditeur dans sa propre fenêtre.
window.open("https://typst.giit.ch/?embed=window", "typsteditor-17") ouvre l’éditeur complet dans sa propre fenêtre et échange les mêmes messages avec window.opener. Les liens d’une IA l’y atteignent. typsteditor:load peut aussi transporter context: { host, title, rules } - le prompt de l’IA indique alors où se trouve le document et suit vos règles - et hook: { url, token, assets: false }, un webhook pour ce seul document, jamais stocké. Fermer la fenêtre avec des modifications non enregistrées envoie typsteditor:closing. typsteditor:pdf demande le PDF du document de la page et le reçoit sous forme de data URI, produit par le compilateur Typst avec du vrai texte sélectionnable.
Transmettez à l’éditeur votre propre prompt, une adresse sur votre site et une clé pour cette session de l’éditeur. La boîte de dialogue de l’IA affiche alors « Connecté à » votre site, ce que vous indiquez à l’IA, et le choix modifier le document actuel ou en créer un nouveau ; Copier le prompt assemble le tout. L’IA envoie son résultat avec la clé à votre serveur, et votre page l’ouvre dans l’éditeur - un nouveau document s’ouvre séparément et reste dans le navigateur de l’utilisateur. Une clé par session de l’éditeur : elle reste valable tant que l’éditeur est ouvert, et l’éditeur ne la demande avec typsteditor:key-request que tant qu’il n’en a pas. L’éditeur n’envoie jamais la clé lui-même et ne la stocke jamais ; l’adresse doit être en https sur votre propre hôte ou sur un de ses sous-domaines.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // une clé par session de l’éditeur
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);
// retenez l’id de typsteditor:loaded et ignorez change/save/closing portant un autre id
// seulement tant que l’éditeur n’a pas de clé :
if (m.type === 'typsteditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'typsteditor:ai', key: k.key }, ORIGIN); }
// tant que l’éditeur est ouvert, prévenez votre serveur chaque minute ; fermer l’éditeur ou la page annule la clé
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// votre serveur a un résultat (polling, SSE …) : target vaut "current" ou "new"
ed.contentWindow.postMessage({ type: 'typsteditor:load', name: 'Flyer', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - la clé de cette session de l’éditeur pour l’utilisateur connecté (appelée par votre page)
session_start(); // vérifiez que l’utilisateur a le droit de modifier ce document
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // ou dans votre base de données ; ?alive= remet seen à jour
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - l’IA envoie ici (sans en-têtes CORS : les IA l’appellent depuis un serveur)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // votre base de données : non annulée, vue dans les 3 dernières minutes
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'); // votre page l’affiche avec typsteditor:load
echo '{"ok":true}';Créez des clés d’au moins 128 bits aléatoires, ne stockez que leur hash, liez chacune à l’utilisateur connecté, au document et à cette session de l’éditeur, créez-en une par session, ne la gardez valable que tant que votre page signale la session comme ouverte, et annulez-la quand l’éditeur ou la page se ferme.
Le protocole complet se trouve dans llms.txt - donnez-le à une IA et elle construit la connexion pour votre système. L’éditeur LaTeX fonctionne de la même façon avec le préfixe latexeditor: - latex.giit.ch.
Non. L’éditeur et le compilateur Typst fonctionnent entièrement dans votre navigateur. Vos documents, images et fichiers ne sont jamais envoyés à un serveur, sauf si vous configurez vous-même un webhook vers votre propre serveur.
Oui. L’éditeur fait tourner Typst 0.14 compilé en WebAssembly (typst.ts) : les pages et le PDF sont les mêmes qu’avec la ligne de commande Typst. Il est chargé une fois (environ 11 Mo) puis conservé par votre navigateur.
Cliquez sur « Exporter », choisissez PDF et cliquez sur « Télécharger ». Le PDF vient directement du compilateur Typst, avec du vrai texte que l’on peut sélectionner et rechercher.
Pas directement : l’éditeur ne charge rien depuis d’autres serveurs, donc #import "@preview/…" signale un problème qui nomme le paquet. Vous pouvez ajouter les fichiers .typ d’un paquet au document dans l’onglet Images et les importer par leur nom de fichier.
Les polices livrées avec Typst : Libertinus Serif (par défaut), New Computer Modern et sa police mathématique, et DejaVu Sans Mono pour le code. Ajoutez vos propres fichiers .otf ou .ttf à un document et utilisez-les avec #set text(font: "Name").
Glissez ou collez une image dans l’éditeur, ou ajoutez-la dans l’onglet Images à droite. Elle est enregistrée avec le document dans votre navigateur et utilisée par #image("name.png"). Les fichiers CSV, JSON, YAML et .bib fonctionnent de la même façon.
Oui, n’importe quelle IA - ChatGPT, Claude, Gemini, Copilot ou l’IA de votre outil de développement. Cliquez sur « Assistant IA », puis sur « Copier le prompt », collez-le dans votre IA et dites-lui ce qu’elle doit écrire. L’IA répond par un lien ; cliquez dessus et le document apparaît dans votre éditeur. « Annuler » revient sur chaque modification.
Oui. Intégrez-le avec une iframe et échangez les documents par postMessage, ou laissez-le envoyer chaque version enregistrée à votre serveur avec un webhook. Voir Utiliser l’éditeur sur votre propre site web pour des exemples.
Non. L’éditeur est gratuit, sans publicité et sans inscription.