QuickATools

Herramientas para desarrolladores · Free browser tool

Vista previa en vivo de Markdown

Escribe y previsualiza sintaxis Markdown en tiempo real. Renderiza HTML limpio con visualización instantánea sin ningún seguimiento de datos en el servidor.

Markdown editor

Split view · compact client-side parser · HTML is escaped before render.

Source

596 chars

Live preview

Markdown Live Previewer

Write GitHub-style notes, README drafts, or AI prompt guides and preview them instantly.

Why this helps

  • See headings, lists, and emphasis as you type
  • Check italics, bold, and strikethrough
  • Keep drafts private — nothing leaves your browser

Inline & block code

Use npm run build for a quick check, or a fenced block:

function greet(name: string) {
  return `Hello, ${name}!`;
}

Tip: Paste a README draft here before you push it.

Links

Read more about CommonMark when you need the full spec.

Frequently Asked Questions

¿Qué es Markdown y por qué tantos docs lo usan?

Markdown es una sintaxis de formato de texto plano que te permite escribir documentos estructurados con marcadores simples —# para encabezados, * o - para listas, **negrita** y bloques de código cercados— y luego convertir ese texto a HTML. Se mantiene legible en bruto, hace diffs limpios en git y es el predeterminado para READMEs de GitHub, plantillas de issues y muchos generadores de sitios estáticos.

¿Qué funciones de Markdown admite esta vista previa?

Cubre el subconjunto cotidiano que necesitan la mayoría de borradores: encabezados ATX (h1–h3), párrafos, negrita/cursiva/tachado, listas ordenadas y no ordenadas, blockquotes, código inline, bloques de código cercados, reglas horizontales y enlaces http(s)/mailto. Es intencionadamente compacta en lugar de un motor CommonMark/GFM completo: extensiones avanzadas como tablas o task lists quedan fuera de alcance para que el bundle se mantenga pequeño.

¿Cómo mejora la productividad de contenido una vista previa en vivo?

Detectas fences rotos, niveles de encabezado torpes y formato de listas mientras escribes en lugar de después de un commit o publicación en CMS. Cambiar entre Visual Preview y HTML Source también ayuda cuando necesitas el markup renderizado para un CMS de blog o plantilla de email sin adivinar cómo se anidarán las etiquetas.

¿Se sube o almacena a algún sitio mi borrador?

No. El parseo y el renderizado se ejecutan por completo en tu navegador. El HTML en bruto de tu entrada se escapa antes de la vista previa para que las etiquetas pegadas no puedan ejecutarse, y nada se envía a un servidor —lo que lo hace más seguro para runbooks internos, borradores de README no publicados y guías de prompts de IA que no deberían salir de tu máquina.

Otras herramientas que te pueden servir

Explora más utilidades gratis en el navegador para vendedores, creadores y profesionales.

Previsualiza borradores de README y guías de prompts sin salir del navegador

Markdown es el dialecto por defecto de READMEs de GitHub, plantillas de issues, borradores de blog y bibliotecas de prompts de IA —pero el código fuente solo rara vez muestra si una jerarquía de encabezados se lee limpia, si un code fence se cerró o si una lista se renderizará como esperas. Una vista previa en vivo colapsa esa incertidumbre: escribe a un lado, ve HTML estructurado al otro y corrige el formato antes de hacer commit o publicar.

Esta vista previa es deliberadamente ligera. En lugar de enviar un motor Markdown grande, convierte un subconjunto práctico de sintaxis —encabezados, énfasis, listas, citas, código inline y cercado, y enlaces seguros— con un parser compacto client-side. El HTML en bruto de tu borrador se escapa primero, así que etiquetas <script> pegadas no pueden ejecutarse en el panel de vista previa.

Como todo se ejecuta en local, docs inacabados, runbooks internos y guías de prompts nunca salen de tu máquina. No hay muro de cuentas ni paso de subida: abre la herramienta, pega un borrador, cambia entre Visual Preview y HTML Source, y luego copia el markup renderizado o descarga un archivo .md.

Combínala con otras utilidades para desarrolladores: comprueba el contraste de enlaces o encabezados en el Comprobador de contraste de color WCAG, ordena front matter JSON con el Formateador y validador de JSON, o depura regexes de documentación en el Probador de regex. Para snippets codificados en docs, usa Codificar/decodificar Base64.