Editor Markdown

Escribe Markdown con vista previa en vivo y descarga como HTML

Editor

Vista previa

Cómo funciona

Editor Markdown — Escribe Markdown con vista previa en vivo y descarga como HTML. Todo el procesamiento ocurre en tu navegador — sin subida, sin registro, sin email. Gratis para siempre.

Última actualización: 2026-05-06

Editor's note

Construimos esto porque queríamos redactar entradas de blog y READMEs sin commitear cada corrección de coma a git solo para ver cómo se renderizaba un encabezado. Los previsualizadores de Markdown locales existen, pero el baile de instalar una extensión de VS Code es más pesado que la propia escritura en un post corto. Una pestaña del navegador que muestra la vista previa en el segundo en que escribes encaja con nuestro hábito real de escritura —teclear a la izquierda, mirar a la derecha, repetir— y el panel partido es a propósito, no una función que se nos olvidó hacer colapsable.

Los dos botones de exportación existen porque cumplen tareas genuinamente distintas en nuestro propio flujo. Copiar HTML es lo que usamos para enviar: pegar en un CMS, adjuntar a un correo, soltar en un sitio estático, y DOMPurify está en medio de esa tubería para que no seamos nosotros quienes metan un agujero XSS en una web de marketing. La copia en Markdown es para archivar el origen, la versión que de verdad quieres conservar cuando el HTML renderizado inevitablemente haya que regenerarlo contra una hoja de estilos nueva seis meses más tarde.

Acerca de Editor Markdown

Este editor Markdown es un entorno de escritura en vivo de dos paneles: escribe Markdown a la izquierda y mira cómo la vista previa HTML renderizada se actualiza en tiempo real a la derecha. Cuando estés satisfecho con el resultado puedes copiar el Markdown, copiar el HTML renderizado o descargarlo como archivo independiente listo para incrustarlo en una web o enviarlo por correo.

Soporta Markdown con sabor GitHub (encabezados, listas, tablas, bloques de código con valla, citas, enlaces, imágenes, HTML en línea y saltos suaves) gracias a la librería marked, con la salida saneada por DOMPurify para que el HTML que copies pueda incrustarse sin abrir agujeros XSS.

Todo corre en tu navegador. No hay cuenta, ni guardado automático en servidor, ni subida de archivos: tus borradores, entradas de blog, READMEs y actas de reunión nunca abandonan tu equipo. Al recargar la página se vacía el editor, así que trátalo como un cuaderno borrador y no como almacenamiento a largo plazo.

Cómo usar Editor Markdown

Haz clic en el panel del editor y empieza a escribir Markdown. Viene un documento de partida para que veas cómo se renderiza cada construcción.
Echa un vistazo al panel de vista previa para verificar que encabezados, enlaces, listas e imágenes se ven como esperabas.
Cambia el diseño entre Ambos, Solo editor y Solo vista previa según estés escribiendo, revisando o presentando.
Usa Copiar Markdown para llevarte la fuente sin procesar, o Copiar HTML para llevarte el HTML renderizado y saneado.
Pulsa Descargar HTML para guardar la vista previa como archivo .html independiente que puedes adjuntar a un correo o abrir en un navegador.
Recarga la página para empezar un documento totalmente nuevo: deliberadamente no hay autoguardado.

Casos de uso comunes

Redactar archivos README de GitHub, descripciones de issues o cuerpos de pull request fuera de la interfaz de GitHub.
Escribir entradas de blog en Markdown y exportar HTML limpio para sitios estáticos o plataformas de newsletter que no entienden Markdown directamente.
Preparar notas de versión o changelogs y previsualizar exactamente cómo quedará el formato antes de pegarlo en Slack, Notion o un CMS.
Enseñar Markdown: los estudiantes pueden experimentar con la sintaxis y ver el resultado renderizado a su lado sin instalar nada.
Convertir rápidamente un fragmento Markdown sacado de la documentación a HTML para usarlo en un artículo del centro de ayuda o de la base de conocimiento.

Consejos y errores comunes

Usa cuatro espacios o un tabulador para anidar elementos de lista; un desajuste de sangría es la causa más común de que una lista anidada se aplane en la vista previa.
Los bloques de código con valla (```lenguaje) reciben en el HTML clases con la etiqueta del lenguaje: conéctalos en tu propio sitio a un resaltador como Prism o highlight.js para obtener código en color.
El HTML en línea está permitido y se renderiza, así que puedes meter <kbd>, <details> o cualquier etiqueta que Markdown no cubra de forma nativa. DOMPurify igualmente quita atributos peligrosos y etiquetas script de la salida.
Cuando copies el HTML obtienes un fragmento, no un documento completo. Envuélvelo en una estructura <html><body> con tu propia hoja de estilos antes de guardarlo como página final.

Preguntas frecuentes

¿Qué sabor de Markdown se soporta?

GitHub-flavored Markdown vía la librería marked — encabezados, listas, tablas, bloques de código vallados, citas, enlaces, imágenes, HTML en línea, saltos de línea suaves y más.

¿Es seguro embeber el HTML resultante en mi sitio?

Sí. Lo saneamos con DOMPurify, que elimina atributos peligrosos y scripts. Puedes pegar el resultado en cualquier página sin riesgo de XSS.

¿Mi Markdown se guarda o se sube?

No. Tanto el renderizado como la descarga ocurren localmente en tu navegador. Recargar la página limpia el editor.

¿Puedo añadir mi propio CSS a la vista previa?

La vista previa interna usa la tipografía por defecto del sitio. Para estilizar la salida en tu propia web, copia el HTML y combínalo con la hoja de estilos que ya utilices: el marcado es HTML semántico y plano, así que cualquier CSS pensado para Markdown funcionará.

¿El editor admite tablas y listas de tareas?

Sí. Las tablas de Markdown con sabor GitHub (con barras verticales y guiones) y los elementos de lista de tareas (- [ ] / - [x]) se renderizan correctamente en la vista previa y sobreviven al HTML exportado.

¿Puedo importar un archivo Markdown existente?

Abre el archivo en cualquier editor de texto, copia su contenido y pégalo en el panel del editor. No hay selector de archivos, lo que mantiene la herramienta totalmente offline y evita la fricción de los diálogos de subida para fragmentos cortos.