Markdown Editor online

Code

Export

The print dialog opens with the document only. 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://md.giit.ch):

{ "editor": "md", "event": "save", "id": "…", "name": "Notes",
  "content": "# Notes\n\n…",
  "assets": { "logo.png": "data:image/png;base64,…" },
  "updated": "YYYY-MM-DDTHH:MM:SS.000Z" }
Embed the editor in your website
<iframe src="https://md.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://md.giit.ch' || e.source !== frame.contentWindow) return;
  if (e.data.type === 'mdeditor:ready')
    frame.contentWindow.postMessage({ type: 'mdeditor:load', name: 'Notes',
      content: '# Notes\n\n…', assets: {} }, 'https://md.giit.ch');
  if (e.data.type === 'mdeditor:save') saveOnYourServer(e.data.content, e.data.assets);
});
</script>

Also possible: ?src=<URL of a .md 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 (mdeditor:ai, mdeditor:key-request) - see "Use the editor on your own website" below the editor. Details are in llms.txt.

Help

How it works

  1. Write Markdown on the left - or start with New and one of the templates. The preview in the middle shows the document 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; characters such as * or _ are escaped so they stay text. A click on math, a picture or code jumps to its place in the code instead. Ctrl + click follows a link. A check box of a task list ticks the task in the code.
  3. Insert on the right has ready-made pieces (headings, lists, tables, math, symbols); Pictures holds the pictures of the document; Outline lists the headings.
  4. Problems (a missing picture, a link to a heading that is not there, a code block that is never closed, a table row with too many cells) 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 an HTML page, a PDF (via the print dialog) or plain text. Download .md saves the code (with its pictures as ZIP).

The preview understands CommonMark with GitHub's tables, task lists, strikethrough, autolinks and footnotes, and math in $…$ and $$…$$. HTML in the Markdown is shown without scripts, styles, frames and forms.

Keyboard shortcuts

Ctrl + B / I
Bold / italic around the selected text
Ctrl + K
Link
Ctrl + M
Math: $…$ around the selection
Ctrl + /
Lines in or out of a comment (<!-- -->)
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 .md, or to your server) / export
Ctrl + O
My documents
Ctrl + P
Print / save as PDF

Enter in a list starts the next item (-, 1., - [ ], >); on an empty item it ends the list. * _ ` ~ $ [ ( close by themselves around a selection.

Escreva Markdown online, com visualização ao vivo

O Editor Markdown mostra o seu código e o documento pronto lado a lado. O que você digita aparece na visualização na hora - títulos, listas, tabelas, listas de tarefas, notas de rodapé e fórmulas - e um clique em qualquer texto da visualização leva você ao lugar dele no código. Você também pode editar o texto direto na visualização. Assim fica rápido escrever READMEs, anotações, documentação e artigos.

Tudo roda no seu navegador. Os documentos não são enviados, não há cadastro nem publicidade.

O que o editor sabe fazer

Código com realce

Títulos, listas, links, código, fórmulas e HTML em cores próprias, números de linha, listas que continuam com Enter e uma lista clara dos problemas com a linha de cada um.

Markdown do GitHub

CommonMark com tabelas, listas de tarefas, tachado, links automáticos e notas de rodapé. Os títulos ganham as mesmas âncoras que no GitHub, e os links para eles são verificados.

Fórmulas

Fórmulas no texto em $…$ e fórmulas em destaque em $$…$$, diagramadas com KaTeX direto na visualização.

Edite na visualização

Clique em uma frase, um título, um item de lista ou uma célula de tabela na visualização e altere ali mesmo - o Markdown acompanha, com os caracteres especiais escapados.

Imagens

Arraste uma imagem para o editor e use-a com ![description](name.png). As imagens ficam guardadas com o documento no seu navegador.

Exportar

Um arquivo HTML com as imagens dentro, PDF pela janela de impressão, texto simples, ou o Markdown com as imagens em ZIP.

Como funciona

  1. Comece - escolha um modelo em "Novo", abra um arquivo .md ou cole Markdown.
  2. Escreva - digite no código; a visualização acompanha. Use "Inserir" para tabelas, listas e fórmulas.
  3. Exporte - salve uma página HTML, um PDF ou o arquivo .md.

Use o editor no seu próprio site

Qualquer página https (e localhost) pode incorporar o editor com um <iframe> e ?embed=1 - sem cadastro, sem chave. Incorporado, o editor oculta este texto e mostra um botão Salvar. Há dois jeitos de levar o documento para dentro e para fora.

1. Abrir um arquivo de um link, salvar no seu servidor

src= abre um arquivo (seu servidor precisa permitir CORS), webhook= faz "Salvar" (Ctrl+S) enviar o documento para esse endereço. Acrescente &token=… para um cabeçalho Authorization: Bearer … e &auto para salvar após cada alteração.

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

O webhook recebe um POST com JSON { editor, event: "save", id, name, content, assets, updated }. Um pequeno script PHP que o guarda:

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

2. A sua página guarda o documento (postMessage)

O editor diz mdeditor:ready, a sua página responde com mdeditor:load, o editor informa mdeditor:loaded, mdeditor:change em edições reais e mdeditor:save quando o usuário salva. A sua página pode enviar mdeditor:get (o estado atual) ou mdeditor:save (apertar Salvar). Salvar passa então pelo seu próprio login e sessão.

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

addEventListener('message', async e => {
  if (e.source !== ed.contentWindow || e.origin !== ORIGIN) return;
  const m = e.data;
  if (m.type === 'mdeditor:ready') {                // o editor está pronto: entregue o documento a ele
    ed.contentWindow.postMessage({
      type: 'mdeditor:load',
      name: 'Notes',
      content: await (await fetch('/docs/notes.md')).text(),
      assets: { 'logo.png': 'data:image/png;base64,…' }   // imagens opcionais
    }, ORIGIN);
  }
  if (m.type === 'mdeditor:change') document.title = '● not saved';   // uma edição real
  if (m.type === 'mdeditor:save') {                 // o usuário clicou em "Salvar"
    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';
  }
});

// Um botão de salvar na sua própria página: a resposta chega como mdeditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'mdeditor:get' }, ORIGIN); }
</script>

Assistente de IA dentro da sua página: ele também funciona no frame. Com allow="clipboard-write" no iframe, "Copiar prompt" usa a área de transferência diretamente (senão o editor recorre ao antigo comando de copiar, ou mostra o prompt para copiar à mão). Um link enviado pela IA não alcança um editor dentro de outro site, então o editor pede à IA e ao usuário que colem a resposta inteira da IA no editor - ou abram o editor em uma janela própria.

3. Em uma janela própria

window.open("https://md.giit.ch/?embed=window", "mdeditor-17") abre o editor completo em uma janela própria e troca as mesmas mensagens com window.opener. Os links de uma IA chegam até ele ali. mdeditor:load também pode levar context: { host, title, rules } - o prompt da IA então diz a que lugar o documento pertence e segue as suas regras - e hook: { url, token, assets: false }, um webhook só para este documento que nunca é guardado. Fechar a janela com alterações não salvas envia mdeditor:closing.

4. IA pelo seu próprio servidor

Entregue ao editor o seu próprio prompt, um endereço no seu site e uma chave para esta sessão do editor. A janela de IA mostra então "Conectado a" o seu site, o que você diz à IA, e a escolha alterar o documento atual ou criar um novo; Copiar prompt junta tudo. A IA envia o resultado com a chave para o seu servidor, e a sua página o abre no editor - um novo documento abre separado e fica no navegador do usuário. Uma chave por sessão do editor: ela vale enquanto o editor estiver aberto, e só enquanto não tiver nenhuma o editor a pede com mdeditor:key-request. O editor nunca envia a chave por conta própria e nunca a guarda; o endereço precisa ser https no seu próprio host ou em um subdomínio dele.

const key = async () => (await fetch('/api/ai-key.php?doc=17')).json();   // uma chave por sessão do editor
const k = await key();
ed.contentWindow.postMessage({ type: 'mdeditor:load', name: 'Notes', 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);
// guarde o id de mdeditor:loaded e ignore change/save/closing com outro id
// só enquanto o editor não tiver chave:
if (m.type === 'mdeditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'mdeditor:ai', key: k.key }, ORIGIN); }
// enquanto o editor estiver aberto, avise o seu servidor a cada minuto; fechar o editor ou a página invalida a chave
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// o seu servidor tem um resultado (polling, SSE …): target é "current" ou "new"
ed.contentWindow.postMessage({ type: 'mdeditor:load', name: 'Notes', content: draft, from: 'ai', target }, ORIGIN);
<?php // api/ai-key.php - a chave desta sessão do editor do usuário logado (a sua página a chama)
session_start();                                     // verifique se o usuário pode editar este documento
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()];  // ou no seu banco de dados; ?alive= atualiza seen
echo json_encode(['key' => $key]);

<?php // api/ai-result.php - a IA envia para cá (sem cabeçalhos CORS: as IAs chamam a partir de um servidor)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key));               // o seu banco de dados: não invalidada, vista nos últimos 3 minutos
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');   // a sua página o mostra com mdeditor:load
echo '{"ok":true}';

Crie chaves com pelo menos 128 bits aleatórios, guarde só o hash delas, vincule cada uma ao usuário logado, ao documento e a esta sessão do editor, crie uma por sessão, mantenha-a válida só enquanto a sua página informar que a sessão está aberta, e invalide-a quando o editor ou a página fechar.

O protocolo completo está em llms.txt - entregue-o a uma IA e ela monta a conexão para o seu sistema. O Editor LaTeX e o Editor SVG funcionam do mesmo jeito com os prefixos latexeditor: e svgeditor: - latex.giit.ch, svg.giit.ch.

Perguntas frequentes

Meu documento é enviado para algum lugar?

Não. O editor roda inteiramente no seu navegador. Seus documentos e imagens nunca são enviados a um servidor, a não ser que você mesmo configure um webhook para o seu próprio servidor.

Que Markdown o editor entende?

CommonMark com as extensões do GitHub: tabelas, listas de tarefas, tachado, links automáticos e notas de rodapé, além de fórmulas em $…$ e $$…$$. Os títulos ganham as mesmas âncoras que no GitHub, então links como [see below](#my-heading) funcionam.

Como gero um PDF ou uma página HTML?

Clique em "Exportar". Escolha PDF e clique em "Imprimir / Salvar como PDF" - na janela de impressão, escolha "Salvar como PDF". Ou escolha Página HTML para ter um arquivo com as imagens e os estilos dentro.

Como adiciono imagens?

Arraste ou cole uma imagem no editor, ou adicione-a na aba Imagens, à direita. Ela fica guardada com o documento no seu navegador e é usada por ![description](name.png).

Onde meus documentos ficam salvos?

Só no seu navegador. Clique no botão de pasta no canto superior esquerdo (Meus documentos) para abrir, renomear, duplicar, baixar ou excluir os documentos. Limpar os dados do site no navegador os apaga, então baixe os que você quer manter - ou deixe o editor enviá-los ao seu próprio servidor ("Salvar no servidor").

Uma IA pode escrever no Editor Markdown?

Sim, qualquer IA - ChatGPT, Claude, Gemini, Copilot ou a IA da sua ferramenta de programação. Clique em "Assistente de IA", depois em "Copiar prompt", cole na sua IA e diga o que ela deve escrever. A IA responde com um link; clique nele e o documento aparece no seu editor. "Desfazer" desfaz qualquer alteração.

Posso usar o editor no meu próprio site?

Sim. Incorpore-o com um iframe e troque documentos com postMessage, ou deixe-o enviar cada versão salva ao seu servidor com um webhook. Veja exemplos em Use o editor no seu próprio site.

O Editor Markdown custa alguma coisa?

Não. O editor é gratuito, sem anúncios e sem cadastro.