LaTeX Editor online

Code

Export

The print dialog opens with exactly the pages of the preview. Choose Save as PDF (or "Microsoft Print to PDF") as the printer. In Chrome and Edge, untick "Headers and footers" if the browser offers it. The text in the PDF stays sharp and can be selected.

My documents

Click a document to open it. They are stored only in this browser - nothing is uploaded. Clearing the browser's site data removes them, so download the ones you want to keep.

AI Assistant

Any AI can write with you - ChatGPT, Claude, Gemini, Copilot.

  1. Click Copy prompt.
  2. Paste it into your AI and say what it should write.
The AI should

The document travels in the link after the “#”, which no server sees. What you paste into your AI is handled by its provider.

Save to your server

The editor can send each saved version to your own server (a webhook), so your work is kept where you want it. Nothing is sent until you enter an address here.

What your server receives

A POST request with JSON (your server must allow CORS from https://latex.giit.ch):

{ "editor": "latex", "event": "save", "id": "…", "name": "Report",
  "content": "\\documentclass{article} …",
  "assets": { "logo.png": "data:image/png;base64,…" },
  "updated": "2026-01-15T09:30:00.000Z" }
Embed the editor in your website
<iframe src="https://latex.giit.ch/?embed=1" style="width:100%;height:80vh;border:0"></iframe>
<script>
const frame = document.querySelector('iframe');
addEventListener('message', e => {
  if (e.origin !== 'https://latex.giit.ch' || e.source !== frame.contentWindow) return;
  if (e.data.type === 'latexeditor:ready')
    frame.contentWindow.postMessage({ type: 'latexeditor:load', name: 'Report',
      content: '\\documentclass{article}…', assets: {} }, 'https://latex.giit.ch');
  if (e.data.type === 'latexeditor:save') saveOnYourServer(e.data.content, e.data.assets);
});
</script>

Also possible: ?src=<URL of a .tex file> opens a file, &webhook=<URL> saves this document there. The editor can also open in a window of its own (?embed=window), and your page can hand it its own AI prompt and a session key so the AI sends its result to your server (latexeditor:ai, latexeditor:key-request) - see "Use the editor on your own website" below the editor. Details are in llms.txt.

Help

How it works

  1. Write LaTeX on the left - or start with New and one of the templates. The preview on the right shows the typeset pages as you type.
  2. Click text in the preview to edit it right there: the cursor is where you clicked, and the code's cursor goes to the same place. Enter or a click elsewhere writes the change into the code (one step for Undo), Escape cancels. A click on math, a picture or text made by a command jumps to its place in the code instead. The place where the code cursor is gets a frame in the preview.
  3. Document on the right sets paper, font, margins and title; Insert has ready-made pieces (lists, tables, math, symbols); Pictures holds the pictures of the document; Outline lists the sections.
  4. Problems in the code (a missing }, an unknown command) are listed above the code - click one to go there.
  5. My documents (the folder button at the top left) lists every document kept in this browser.
  6. Export makes a PDF (via the print dialog), pictures of the pages, an HTML page or plain text. Download .tex saves the code.

The preview is the editor's own typesetting and understands the commands most documents use. TikZ drawings and fontspec fonts are not shown - the code stays valid LaTeX that compiles with pdflatex.

Keyboard shortcuts

Ctrl + B / I / U
Bold / italic / underline the selected text
Ctrl + M
Math: $…$ around the selection
Ctrl + /
Comment lines in or out (%)
Ctrl + Enter
Show the cursor's place in the preview
Tab / Shift + Tab
Indent / outdent
Ctrl + Z / Y
Undo / redo
Ctrl + S / E
Save (download .tex, or to your server) / export
Ctrl + O
My documents
Ctrl + P
Print / save as PDF
Ctrl + mouse wheel, Ctrl + + -
Zoom the preview
Page Up / Page Down
Previous / next page (in the preview)

Typing \begin{name} and pressing Enter adds the matching \end{name}. Brackets { [ ( and $ close by themselves around a selection.

在线编写 LaTeX,实时预览

LaTeX 编辑器将你的代码和排版后的页面并排显示。你输入的内容会立即出现在页面上,包括标题、列表、表格、公式、脚注和引用;点击预览中的任意文字,即可跳到它在代码中的位置。你也可以直接在页面上编辑文字。这样无需安装 TeX,就能快速写出信函、习题单、报告和传单。

一切都在你的浏览器中运行。文档不会上传,无需注册,也没有广告。

编辑器的功能

代码高亮

命令、环境、公式和注释各有颜色,带行号,自动补全 \end{…},并清楚列出问题及其所在行。

所见即所印

A4、Letter 或自定义纸张尺寸,标准文档类或 geometry 的页边距,页码,页面底部的脚注,以及 LaTeX 的 Latin Modern 字体。

公式

行内公式和独立公式、编号公式、align、矩阵以及 amsmath 的符号,由 KaTeX 直接排版在页面上。

表格、插图、引用

带横线和合并单元格的 tabular 和 tabularx,带题注的插图,\label 和 \ref,目录和参考文献。

图片

将图片拖入编辑器,用 \includegraphics 使用它。图片与文档一起保存在你的浏览器中。

导出

通过打印对话框生成 PDF,每页导出为 PNG、JPG 或 WebP,单个 HTML 文件,纯文本,或带图片的 LaTeX 源文件 ZIP。

使用方法

  1. 开始:在“新建”中选择模板,打开 .tex 文件或粘贴 LaTeX 代码。
  2. 编写:在代码中输入,右侧的页面随之更新。用“插入”添加表格、列表和公式。
  3. 导出:保存 PDF、页面图片或 .tex 文件。

在你自己的网站上使用编辑器

任何 https 页面(以及 localhost)都可以用 <iframe> 和 ?embed=1 嵌入编辑器,无需注册,无需密钥。嵌入后,编辑器会隐藏这段文字并显示“保存”按钮。有两种方式传入和取出文档。

1. 从链接打开文件,保存到你的服务器

src= 打开一个文件(你的服务器必须允许 CORS),webhook= 让“保存”(Ctrl+S)把文档发送到该地址。加上 &token=… 可发送 Authorization: Bearer … 请求头,加上 &auto 则每次更改后都会保存。

<iframe src="https://latex.giit.ch/?embed=1&src=https://your-site.com/docs/flyer.tex&webhook=https://your-site.com/save.php"
        allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>

Webhook 会收到一个带 JSON 的 POST 请求 { editor, event: "save", id, name, content, assets, updated }。一个保存它的简短 PHP 脚本:

<?php
header('Access-Control-Allow-Origin: https://latex.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.tex", $d['content']);
echo '{"ok":true}';

2. 由你的页面保存文档(postMessage)

编辑器发送 latexeditor:ready,你的页面以 latexeditor:load 回应,编辑器报告 latexeditor:loaded,有实际编辑时发送 latexeditor:change,用户保存时发送 latexeditor:save。你的页面可以发送 latexeditor:get(获取当前状态)或 latexeditor:save(相当于点击“保存”)。这样保存就通过你自己的登录和会话进行。

<iframe id="ed" src="https://latex.giit.ch/?embed=1" allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>
<script>
const ed = document.getElementById('ed');
const ORIGIN = 'https://latex.giit.ch';

addEventListener('message', async e => {
  if (e.source !== ed.contentWindow || e.origin !== ORIGIN) return;
  const m = e.data;
  if (m.type === 'latexeditor:ready') {             // 编辑器已就绪:把文档交给它
    ed.contentWindow.postMessage({
      type: 'latexeditor:load',
      name: 'Flyer',
      content: await (await fetch('/docs/flyer.tex')).text(),
      assets: { 'logo.png': 'data:image/png;base64,…' }   // 可选的图片
    }, ORIGIN);
  }
  if (m.type === 'latexeditor:change') document.title = '● not saved';   // 一次实际编辑
  if (m.type === 'latexeditor: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';
  }
});

// 你自己页面上的保存按钮:回应以 latexeditor:save 返回
function saveNow() { ed.contentWindow.postMessage({ type: 'latexeditor:get' }, ORIGIN); }
</script>

页面内的 AI 助手:在框架中同样可用。在 iframe 上设置 allow="clipboard-write" 后,“复制提示词”会直接使用剪贴板(否则编辑器会退回旧的复制命令,或显示提示词供手动复制)。AI 发送的链接无法到达另一个网站中的编辑器,因此编辑器会提示 AI 和用户把 AI 的完整回答粘贴到编辑器中,或在单独的窗口中打开编辑器。

3. 在单独的窗口中

window.open("https://latex.giit.ch/?embed=window", "latexeditor-17") 会在单独的窗口中打开完整的编辑器,并通过 window.opener 使用相同的消息。AI 的链接可以到达那里。latexeditor:load 还可以带上 context: { host, title, rules }(AI 提示词随后会说明文档属于哪里,并遵循你的规则),以及 hook: { url, token, assets: false },即仅用于此文档、从不保存的 Webhook。关闭有未保存更改的窗口时会发送 latexeditor:closing。

4. 通过你自己的服务器使用 AI

向编辑器提供你自己的提示词、你网站上的一个地址和本次编辑器会话的密钥。AI 对话框随后会显示“已连接到”你的网站、你告诉 AI 的内容,以及修改当前文档或新建一个文档的选项;复制提示词会把这些都组合起来。AI 带着密钥把结果发送到你的服务器,你的页面再在编辑器中打开它;新文档会单独打开,并保留在用户的浏览器中。每个编辑器会话一个密钥:编辑器打开期间有效,只有在没有密钥时,编辑器才会用 latexeditor:key-request 请求。编辑器自己从不发送密钥,也从不保存它;地址必须是你自己主机或其子域名上的 https 地址。

const key = async () => (await fetch('/api/ai-key.php?doc=17')).json();   // 每个编辑器会话一个密钥
const k = await key();
ed.contentWindow.postMessage({ type: 'latexeditor: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);
// 记住 latexeditor:loaded 中的 id,忽略 id 不同的 change/save/closing
// 仅在编辑器没有密钥时:
if (m.type === 'latexeditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'latexeditor: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: 'latexeditor: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 向这里发送(无需 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');   // 你的页面用 latexeditor:load 显示它
echo '{"ok":true}';

密钥至少使用 128 位随机数,只保存其哈希值,将每个密钥绑定到已登录用户、文档和本次编辑器会话,每个会话一个,仅在你的页面报告会话仍打开时有效,并在编辑器或页面关闭时作废。

完整协议见 llms.txt,把它交给 AI,AI 就能为你的系统建立连接。SVG 编辑器的用法相同,前缀为 svgeditor:,见 svg.giit.ch。

常见问题

我的文档会被上传吗?

不会。编辑器完全在你的浏览器中运行。你的文档和图片绝不会发送到服务器,除非你自己设置了指向自己服务器的 Webhook。

如何得到 PDF?

点击“导出”,选择 PDF,再点击“打印 / 另存为 PDF”。在打印对话框中选择“另存为 PDF”作为打印机。页面与预览完全相同,文字可以选中。

需要安装 TeX 吗?

不需要。编辑器在浏览器中自行排版 LaTeX,支持大多数文档常用的命令:章节、列表、表格、插图、公式、颜色、脚注、引用。TikZ 绘图和 fontspec 字体不会显示;代码仍是有效的 LaTeX,随时可以用 pdflatex 编译。

如何添加图片?

将图片拖入或粘贴到编辑器中,或在右侧的图片标签页中添加。图片与文档一起保存在你的浏览器中,通过 \includegraphics{name} 使用。

我的文档保存在哪里?

只保存在你的浏览器中。点击左上角的文件夹按钮(我的文档)即可打开、重命名、复制、下载或删除它们。清除浏览器的网站数据会删除它们,因此请下载需要保留的文档,或让编辑器把它们发送到你自己的服务器(“保存到服务器”)。

AI 能在 LaTeX 编辑器中写作吗?

能,任何 AI 都可以:ChatGPT、Claude、Gemini、Copilot 或你编程工具中的 AI。点击“AI 助手”,再点击“复制提示词”,粘贴到你的 AI 中并说明要写什么。AI 会回复一个链接;点击它,文档就会出现在你的编辑器中。“撤销”可撤回每一处更改。

我可以在自己的网站上使用编辑器吗?

可以。用 iframe 嵌入它并通过 postMessage 交换文档,或让它通过 Webhook 把每个保存的版本发送到你的服务器。示例见在你自己的网站上使用编辑器。

LaTeX 编辑器收费吗?

不收费。编辑器免费,没有广告,无需注册。