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.

Пишите Markdown онлайн с живым предпросмотром

Редактор Markdown показывает ваш код и готовый документ рядом. Всё, что вы набираете, сразу появляется в предпросмотре - заголовки, списки, таблицы, списки задач, сноски и формулы, - а щелчок по любому тексту в предпросмотре переносит вас к его месту в коде. Текст можно править и прямо в предпросмотре. Так можно быстро писать README, заметки, документацию и статьи.

Всё работает в вашем браузере. Документы никуда не загружаются, нет регистрации и нет рекламы.

Что умеет редактор

Код с подсветкой

Заголовки, списки, ссылки, код, формулы и HTML своими цветами, номера строк, списки, которые продолжаются по Enter, и понятный список проблем с номером строки.

Markdown как на GitHub

CommonMark с таблицами, списками задач, зачёркиванием, автоссылками и сносками. Заголовки получают те же якоря, что и на GitHub, а ссылки на них проверяются.

Формулы

Формулы в строке в $…$ и выключные формулы в $$…$$, свёрстанные с KaTeX прямо в предпросмотре.

Правка в предпросмотре

Щёлкните по предложению, заголовку, пункту списка или ячейке таблицы в предпросмотре и измените их там - Markdown следует за изменением, спецсимволы экранируются.

Изображения

Перетащите изображение в редактор и используйте его через ![description](name.png). Изображения хранятся вместе с документом в вашем браузере.

Экспорт

Один файл HTML с изображениями внутри, PDF через диалог печати, простой текст или Markdown с изображениями в ZIP.

Как это работает

  1. Начните - выберите шаблон в меню «Новый», откройте файл .md или вставьте Markdown.
  2. Пишите - набирайте код; предпросмотр следует за ним. Таблицы, списки и формулы - в меню «Вставка».
  3. Экспортируйте - сохраните страницу HTML, PDF или файл .md.

Редактор на вашем сайте

Любая страница на https (и localhost) может встроить редактор через <iframe> и ?embed=1 - без регистрации и без ключа. Во встроенном виде редактор скрывает этот текст и показывает кнопку «Сохранить». Есть два способа передать документ в редактор и получить его обратно.

1. Открыть файл по ссылке, сохранять на ваш сервер

src= открывает файл (ваш сервер должен разрешать CORS), webhook= заставляет «Сохранить» (Ctrl+S) отправлять документ на этот адрес. Добавьте &token=… для заголовка Authorization: Bearer … и &auto, чтобы сохранять после каждого изменения.

<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>

Вебхук получает POST с JSON { editor, event: "save", id, name, content, assets, updated }. Небольшой PHP-скрипт, который его сохраняет:

<?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. Документ хранит ваша страница (postMessage)

Редактор сообщает mdeditor:ready, ваша страница отвечает mdeditor:load, редактор сообщает mdeditor:loaded, mdeditor:change при настоящих правках и mdeditor:save, когда пользователь сохраняет. Ваша страница может отправить mdeditor:get (текущее состояние) или mdeditor:save (нажать «Сохранить»). Сохранение тогда идёт через ваш собственный вход и сеанс.

<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') {                // редактор готов: передаём ему документ
    ed.contentWindow.postMessage({
      type: 'mdeditor:load',
      name: 'Notes',
      content: await (await fetch('/docs/notes.md')).text(),
      assets: { 'logo.png': 'data:image/png;base64,…' }   // необязательные изображения
    }, ORIGIN);
  }
  if (m.type === 'mdeditor:change') document.title = '● not saved';   // настоящая правка
  if (m.type === 'mdeditor: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';
  }
});

// Кнопка сохранения на вашей странице: ответ приходит как mdeditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'mdeditor:get' }, ORIGIN); }
</script>

ИИ-ассистент внутри вашей страницы: он работает и во фрейме. С allow="clipboard-write" на iframe кнопка «Копировать промпт» напрямую использует буфер обмена (иначе редактор переходит на старую команду копирования или показывает промпт для ручного копирования). Ссылка, которую присылает ИИ, не может попасть в редактор внутри другого сайта, поэтому редактор просит ИИ и пользователя вставить весь ответ ИИ в редактор - или открыть редактор в отдельном окне.

3. В отдельном окне

window.open("https://md.giit.ch/?embed=window", "mdeditor-17") открывает полный редактор в отдельном окне и обменивается теми же сообщениями с window.opener. Ссылки от ИИ попадают туда. mdeditor:load может также содержать context: { host, title, rules } - тогда промпт для ИИ говорит, к чему относится документ, и следует вашим правилам, - и hook: { url, token, assets: false }, вебхук только для этого документа, который никогда не сохраняется. При закрытии окна с несохранёнными изменениями отправляется mdeditor:closing.

4. ИИ через ваш собственный сервер

Передайте редактору свой промпт, адрес на вашем сайте и ключ для этого сеанса редактора. Тогда диалог ИИ показывает «Подключено к» вашему сайту, что вы сообщаете ИИ, и выбор изменить текущий документ или создать новый; Копировать промпт собирает всё вместе. ИИ отправляет свой результат с ключом на ваш сервер, а ваша страница открывает его в редакторе - новый документ открывается отдельно и остаётся в браузере пользователя. Один ключ на сеанс редактора: он действует, пока редактор открыт, и только пока ключа нет, редактор запрашивает его через mdeditor:key-request. Редактор никогда сам не отправляет ключ и никогда не сохраняет его; адрес должен быть https на вашем собственном хосте или его поддомене.

const key = async () => (await fetch('/api/ai-key.php?doc=17')).json();   // один ключ на сеанс редактора
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);
// запомните id из mdeditor:loaded и игнорируйте change/save/closing с другим id
// только пока у редактора нет ключа:
if (m.type === 'mdeditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'mdeditor:ai', key: k.key }, ORIGIN); }
// пока редактор открыт, сообщайте серверу каждую минуту; закрытие редактора или страницы аннулирует ключ
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// у вашего сервера есть результат (polling, SSE …): target - "current" или "new"
ed.contentWindow.postMessage({ type: 'mdeditor:load', name: 'Notes', 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 - сюда отправляет ИИ (без заголовков CORS: ИИ вызывает его с сервера)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key));               // ваша база данных: не аннулирован, seen за последние 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');   // ваша страница показывает его через mdeditor:load
echo '{"ok":true}';

Создавайте ключи минимум из 128 случайных бит, храните только их хеш, привязывайте каждый к вошедшему пользователю, документу и этому сеансу редактора, создавайте один ключ на сеанс, считайте его действительным, только пока ваша страница сообщает, что сеанс открыт, и аннулируйте его, когда редактор или страница закрываются.

Весь протокол описан в llms.txt - дайте его ИИ, и он построит подключение для вашей системы. Редактор LaTeX и редактор SVG работают так же с префиксами latexeditor: и svgeditor: - latex.giit.ch, svg.giit.ch.

Частые вопросы

Мой документ куда-то загружается?

Нет. Редактор полностью работает в вашем браузере. Ваши документы и изображения никогда не отправляются на сервер, если только вы сами не настроите вебхук на свой собственный сервер.

Какой Markdown понимает редактор?

CommonMark с расширениями GitHub: таблицы, списки задач, зачёркивание, автоссылки и сноски, а также формулы в $…$ и $$…$$. Заголовки получают те же якоря, что и на GitHub, поэтому ссылки вида [see below](#my-heading) работают.

Как получить PDF или страницу HTML?

Нажмите «Экспорт». Выберите PDF и нажмите «Печать / Сохранить в PDF» - в диалоге печати выберите «Сохранить как PDF». Или выберите «Страница HTML», чтобы получить один файл с изображениями и стилями внутри.

Как добавить изображения?

Перетащите или вставьте изображение в редактор или добавьте его во вкладке Изображения справа. Оно хранится вместе с документом в вашем браузере и используется через ![description](name.png).

Где сохраняются мои документы?

Только в вашем браузере. Нажмите кнопку с папкой вверху слева («Мои документы»), чтобы открывать, переименовывать, дублировать, скачивать или удалять их. Очистка данных сайта в браузере удалит их, поэтому скачайте те, которые хотите сохранить, - или пусть редактор отправляет их на ваш собственный сервер («На сервер»).

Может ли ИИ писать в редакторе Markdown?

Да, любой ИИ - ChatGPT, Claude, Gemini, Copilot или ИИ в вашем инструменте для программирования. Нажмите «ИИ-ассистент», затем «Копировать промпт», вставьте его в свой ИИ и скажите, что нужно написать. ИИ ответит ссылкой; щёлкните по ней, и документ появится в вашем редакторе. «Отменить» возвращает любое изменение.

Можно ли использовать редактор на моём сайте?

Да. Встройте его через iframe и обменивайтесь документами через postMessage или пусть он отправляет каждую сохранённую версию на ваш сервер через вебхук. Примеры - в разделе Редактор на вашем сайте.

Сколько стоит редактор Markdown?

Нисколько. Редактор бесплатный, без рекламы и без регистрации.