Code
El Editor de Markdown muestra tu código y el documento terminado uno al lado del otro. Lo que escribes aparece al instante en la vista previa (encabezados, listas, tablas, listas de tareas, notas al pie y fórmulas), y un clic en cualquier texto de la vista previa te lleva a su lugar en el código. También puedes editar el texto directamente en la vista previa. Así escribes rápidamente README, notas, documentación y artículos.
Todo se ejecuta en tu navegador. Los documentos no se suben, no hay registro ni publicidad.
Encabezados, listas, enlaces, código, fórmulas y HTML con sus propios colores, números de línea, listas que continúan al pulsar Enter y una lista clara de problemas con su línea.
CommonMark con tablas, listas de tareas, tachado, enlaces automáticos y notas al pie. Los encabezados reciben las mismas anclas que en GitHub, y los enlaces a ellos se comprueban.
Fórmulas en línea en $…$ y fórmulas destacadas en $$…$$, compuestas con KaTeX directamente en la vista previa.
Haz clic en una frase, un encabezado, un elemento de lista o una celda de tabla en la vista previa y cámbialo allí: el Markdown lo sigue, con los caracteres especiales escapados.
Arrastra una imagen al editor y úsala con . Las imágenes se guardan con el documento en tu navegador.
Un archivo HTML con las imágenes dentro, PDF con el diálogo de impresión, texto sin formato, o el Markdown con sus imágenes como ZIP.
Cualquier página https (y localhost) puede integrar el editor con un <iframe> y ?embed=1, sin registro y sin clave. Integrado, el editor oculta este texto y muestra un botón Guardar. Hay dos formas de meter y sacar el documento.
src= abre un archivo (tu servidor debe permitir CORS), webhook= hace que «Guardar» (Ctrl+S) envíe el documento a esa dirección. Añade &token=… para una cabecera Authorization: Bearer … y &auto para guardar después de cada cambio.
<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>El webhook recibe un POST con JSON { editor, event: "save", id, name, content, assets, updated }. Un pequeño script PHP que lo 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}';El editor dice mdeditor:ready, tu página responde con mdeditor:load, el editor informa con mdeditor:loaded, con mdeditor:change en cada edición real y con mdeditor:save cuando el usuario guarda. Tu página puede enviar mdeditor:get (el estado actual) o mdeditor:save (pulsar Guardar). Así el guardado pasa por tu propio inicio de sesión y tu sesión.
<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') { // el editor está listo: pásale el documento
ed.contentWindow.postMessage({
type: 'mdeditor:load',
name: 'Notes',
content: await (await fetch('/docs/notes.md')).text(),
assets: { 'logo.png': 'data:image/png;base64,…' } // imágenes opcionales
}, ORIGIN);
}
if (m.type === 'mdeditor:change') document.title = '● not saved'; // una edición real
if (m.type === 'mdeditor:save') { // el usuario hizo clic en «Guardar»
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 botón de guardar en tu propia página: la respuesta llega como mdeditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'mdeditor:get' }, ORIGIN); }
</script>Asistente de IA dentro de tu página: también funciona en el marco. Con allow="clipboard-write" en el iframe, «Copiar prompt» usa el portapapeles directamente (si no, el editor recurre al antiguo comando de copiar o muestra el prompt para copiarlo a mano). Un enlace que envía la IA no puede llegar a un editor dentro de otro sitio web, así que el editor indica a la IA y al usuario que peguen la respuesta completa de la IA en el editor, o que abran el editor en una ventana propia.
window.open("https://md.giit.ch/?embed=window", "mdeditor-17") abre el editor completo en su propia ventana y usa los mismos mensajes con window.opener. Ahí sí le llegan los enlaces de una IA. mdeditor:load también puede llevar context: { host, title, rules } (el prompt de IA dice entonces a dónde pertenece el documento y sigue tus reglas) y hook: { url, token, assets: false }, un webhook solo para este documento que nunca se guarda. Al cerrar la ventana con cambios sin guardar se envía mdeditor:closing.
Pasa al editor tu propio prompt, una dirección en tu sitio y una clave para esta sesión del editor. El diálogo de IA muestra entonces «Conectado a» tu sitio, lo que le dices a la IA y la opción cambiar el documento actual o crear uno nuevo; Copiar prompt lo junta todo. La IA envía su resultado con la clave a tu servidor, y tu página lo abre en el editor: un documento nuevo se abre aparte y se queda en el navegador del usuario. Una clave por sesión del editor: sigue siendo válida mientras el editor esté abierto, y solo mientras no tenga ninguna el editor la pide con mdeditor:key-request. El editor nunca envía la clave por sí mismo ni la guarda; la dirección debe ser https en tu propio host o en un subdominio suyo.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // una clave por sesión del 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);
// recuerda el id de mdeditor:loaded e ignora change/save/closing con otro id
// solo mientras el editor no tenga clave:
if (m.type === 'mdeditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'mdeditor:ai', key: k.key }, ORIGIN); }
// mientras el editor esté abierto, avisa a tu servidor cada minuto; cerrar el editor o la página anula la clave
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// tu servidor tiene un resultado (polling, SSE …): target es «current» o «new»
ed.contentWindow.postMessage({ type: 'mdeditor:load', name: 'Notes', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - la clave de esta sesión del editor del usuario con sesión iniciada (la llama tu página)
session_start(); // comprueba que el usuario puede editar este documento
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // o en tu base de datos; ?alive= vuelve a fijar seen
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - la IA envía aquí (sin cabeceras CORS: las IA lo llaman desde un servidor)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // tu base de datos: no anulada, vista en los ú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'); // tu página lo muestra con mdeditor:load
echo '{"ok":true}';Crea claves con al menos 128 bits aleatorios, guarda solo su hash, vincula cada una al usuario con sesión iniciada, al documento y a esta sesión del editor, crea una por sesión, mantenla válida solo mientras tu página informe de que la sesión está abierta, y anúlala cuando se cierre el editor o la página.
El protocolo completo está en llms.txt: dáselo a una IA y construirá la conexión para tu sistema. El Editor de LaTeX y el Editor de SVG funcionan igual con los prefijos latexeditor: y svgeditor:: latex.giit.ch, svg.giit.ch.
No. El editor se ejecuta por completo en tu navegador. Tus documentos e imágenes nunca se envían a un servidor, salvo que tú mismo configures un webhook a tu propio servidor.
CommonMark con las extensiones de GitHub: tablas, listas de tareas, tachado, enlaces automáticos y notas al pie, además de fórmulas en $…$ y $$…$$. Los encabezados reciben las mismas anclas que en GitHub, así que enlaces como [see below](#my-heading) funcionan.
Haz clic en «Exportar». Elige PDF y haz clic en «Imprimir / Guardar como PDF»; en el diálogo de impresión elige «Guardar como PDF». O elige Página HTML para obtener un archivo con las imágenes y los estilos dentro.
Arrastra o pega una imagen en el editor, o añádela en la pestaña Imágenes de la derecha. Se guarda con el documento en tu navegador y la usa .
Solo en tu navegador. Haz clic en el botón de carpeta arriba a la izquierda (Mis documentos) para abrirlos, renombrarlos, duplicarlos, descargarlos o eliminarlos. Si borras los datos del sitio en tu navegador, desaparecen; descarga los que quieras conservar, o deja que el editor los envíe a tu propio servidor («Guardar en servidor»).
Sí, cualquier IA: ChatGPT, Claude, Gemini, Copilot o la IA de tu herramienta de programación. Haz clic en «Asistente de IA» y luego en «Copiar prompt», pégalo en tu IA y dile qué debe escribir. La IA responde con un enlace; haz clic en él y el documento aparece en tu editor. «Deshacer» revierte cada cambio.
Sí. Intégralo con un iframe e intercambia documentos con postMessage, o deja que envíe cada versión guardada a tu servidor con un webhook. Mira Usa el editor en tu propio sitio web para ver ejemplos.
No. El editor es gratuito, sin anuncios y sin registro.