# giit Editors (editors.giit.ch)

> Free browser editors for LaTeX, SVG, HTML, Markdown, JSON, YAML, XML, CSV and Typst by Grünwald Innovation (Switzerland). Code with a live preview, no sign-up, no upload; any AI can write into them with a link, and every editor can be embedded in another website with the same postMessage protocol.

- Cost: free, no ads
- Data: documents stay in the browser unless the user or an embedding page sets up its own server (webhook)
- Languages: English interface by default, German with ?lang=de (remembered); the AI prompt is always English
- German page: https://editors.giit.ch/de/

## Editors

- [LaTeX Editor](https://latex.giit.ch/): Write LaTeX and see the typeset pages as you type. Pictures, document settings, PDF export. Details: https://latex.giit.ch/llms.txt
- [SVG Editor](https://svg.giit.ch/): SVG as code and on a canvas: move, resize and recolor shapes, snap grid, export to PNG, JPG, WebP or React. Details: https://svg.giit.ch/llms.txt
- [HTML Editor](https://html.giit.ch/): HTML with a live preview of the page, pictures as files, edit text right in the preview, export as one file or ZIP. Details: https://html.giit.ch/llms.txt
- [Markdown Editor](https://md.giit.ch/): Markdown with tables, task lists, footnotes and math, a readable preview and export to HTML or PDF. Details: https://md.giit.ch/llms.txt
- [JSON Editor](https://json.giit.ch/): JSON as code and as a foldable tree: edit keys and values in the tree, check against a JSON Schema, convert to YAML, CSV or XML. (in development)
- [YAML Editor](https://yaml.giit.ch/): YAML with the same data tree, comments and anchors kept, problems with their line, convert to JSON. (in development)
- [XML Editor](https://xml.giit.ch/): XML with an element tree, XPath search, well-formedness check and conversion to JSON or YAML. Details: https://xml.giit.ch/llms.txt
- [CSV Editor](https://csv.giit.ch/): CSV as text and as a spreadsheet-like table, also for large files; export to XLSX, JSON, Markdown or HTML tables. Details: https://csv.giit.ch/llms.txt
- [Typst Editor](https://typst.giit.ch/): Typst with the real compiler in the browser: pages as you type, PDF with selectable text, pictures stored with the document. (in development)

## Shared by every editor

- Private by design: The editors are static pages. Your documents stay in your browser (local storage); nothing is sent to a server unless you set up your own.
- My documents: Keep any number of documents in the browser: open, rename, duplicate, download and delete them, each with its own undo history.
- Any AI can write with you: "AI Assistant" → "Copy prompt" gives ChatGPT, Claude, Gemini or Copilot everything they need. The AI answers with a link that opens its result in your editor - Undo takes it back.
- Browser agents (WebMCP): In browsers with WebMCP, AI agents get tools to read and change the open document directly; every change is an undo step.
- AI status at a glance: A dot on the AI button shows whether an AI is connected: through your website, as a browser agent, or by links in this tab.
- Edit in the preview: Click text in the preview and change it there; the code follows. Click anywhere else to jump to the code.
- Save to your own server: A webhook sends every saved version to an address you choose, with a token - automatically or on Ctrl+S.
- English or German: Add ?lang=de for a German interface; the choice is remembered. The AI prompt always stays in English.
- Light, dark or automatic: Every editor follows your system or the theme you choose, and works on phones and tablets.

## Writing into an editor (for AI assistants)

Each editor takes a document in the URL hash, which never reaches a server: `#b64=<base64url of the UTF-8 text>`, `#<format>=<URL-encoded text>` (e.g. `#tex=`, `#svg=`, `#md=`) or `#z=<base64url of zlib-compressed text>`; optional `&mode=add`, `&file=new&name=<name>`, `&file=<name>`, and `&part=N&of=M&id=<name>` for long documents. The user can undo every change. Each editor's llms.txt has its own details.

## Embedding (for developers)

### Put the editor into your page

An iframe is enough. ?embed=1 shows the reduced view with a Save button, ?save=0 hides it when your page has its own, ?lang=de shows the German interface.

    <iframe id="ed" src="https://latex.giit.ch/?embed=1&lang=de"
            allow="clipboard-write" style="width:100%;height:80vh;border:0"></iframe>

### Load your document, receive changes and saves

The editor says it is ready, your page sends the document, and the editor reports real edits and every Save. Check the origin of every message.

    const ED = 'https://latex.giit.ch', ed = document.getElementById('ed');
    addEventListener('message', e => {
      if (e.origin !== ED || e.source !== ed.contentWindow) return;
      const m = e.data;
      if (m.type === 'latexeditor:ready')
        ed.contentWindow.postMessage({ type: 'latexeditor:load', name: 'Offer', content: myText }, ED);
      if (m.type === 'latexeditor:change') markUnsaved();
      if (m.type === 'latexeditor:save') saveOnYourServer(m.content, m.assets);
    });

### Or open it in a window of its own

The full editor in its own window talks to window.opener in exactly the same way - and links from an AI reach it there.

    const win = window.open('https://latex.giit.ch/?embed=window&lang=de', 'latexeditor-17');

### Let an AI deliver straight to your server

Hand the editor your rules, an https address on your own site and one key for this editor session. "Copy prompt" then tells the AI to POST its result there; your page opens it in the editor. Keep the key valid only while the editor is open.

    ed.contentWindow.postMessage({ type: 'latexeditor:load', name: 'Offer', content: myText,
      ai: { label: 'My Admin', prompt: 'Keep the placeholders.',
            endpoint: 'https://your-site.com/api/ai-result', key: sessionKey } }, ED);

Messages (prefix `<editor>editor:`, e.g. `latexeditor:`):

- editor → page: `ready` - The editor can take a document.
- page → editor: `load {name, content, assets?, context?, hook?, ai?}` - Open your document (with pictures, where the format has them).
- editor → page: `loaded {id, name}` - Your document is open; remember its id.
- editor → page: `change {id, name, content}` - A real edit (not the load).
- editor → page: `save {id, name, content, assets, updated}` - Save / Ctrl+S, or the answer to get.
- page → editor: `get · save` - Ask for the current state · press Save.
- editor → page: `closing {id, name, content}` - The own window closes with unsaved changes.
- editor → page: `reload {id, unsaved}` - F5 / Ctrl+R inside your page - you decide.
- page → editor: `ai {label, prompt, endpoint, key} · ai {clear}` - AI through your server, one key per session.
- editor → page: `key-request {reason: "missing"}` - The session has no key yet.

## Details

- Only messages from the page around the editor (or the window that opened it) are taken, only from a real origin, and after its first message only from that origin. Everything sent to the page is about the document the page loaded, never about the user's other documents.
- `load` may carry `context: {host, title, rules}` for the AI prompt and `hook: {url, token}` - a webhook for this document only, kept in memory.
- Webhook: `POST <url>` with `Content-Type: application/json`, `Authorization: Bearer <token>` and `{editor, event: "save", id, name, content, assets?, updated}`; the server must allow CORS from the editor's origin; its error text is shown to the user.
- AI through your server: the endpoint must be https on your page's own host or a subdomain; one key per editor session (16-512 characters), valid only while the editor is open; the editor never sends the key itself - it only goes into the prompt the user copies. The AI posts `{editor, target: "current"|"new", name, content}` with `Authorization: Bearer <key>`; your page shows the result with `load {from: "ai", target}`.
- `?embed=1` reduced view, `?embed=window` own window, `?save=0` no Save button, `?src=<url>` open a file (CORS), `?webhook=<url>` webhook for that document only, `?lang=de|en` interface language.
- Files of a document (`assets`, data URIs) exist in editors whose format has them: LaTeX, HTML, Markdown, Typst. SVG, JSON, YAML, XML and CSV send no assets.
- Browser agents: where the browser offers WebMCP (`document.modelContext`), each editor registers tools to read and change the open document; every change is an undo step.

## Pages

- [giit Editors](https://editors.giit.ch/)
- [giit Editors (Deutsch)](https://editors.giit.ch/de/)
- [Imprint](https://editors.giit.ch/imprint.html)
- [Privacy policy](https://editors.giit.ch/privacy.html)

A project by [Grünwald Innovation](https://giit.ch/).