Las mejores herramientas de presentación slides-as-code para desarrolladores

Si alguna vez construiste una presentación en PowerPoint, Google Slides, Keynote u otras herramientas similares, conoces el trabajo manual: arrastrar cajas, diseñar cada diapositiva a mano, acomodar imágenes pixel por pixel, perder el formato al pegar contenido y no tener control de versiones. Puedes hacer git diff de tu código fuente — pero no de tus diapositivas.

Slides-as-code es la alternativa: escribir presentaciones en Markdown, en tu IDE, con control de versiones, compatibles con CI/CD y compartibles como HTML estático. En la era de los agentes, eso importa aún más — el formato es textual y estructurado, así que los agentes pueden redactar decks casi sin error mientras yo me concentro en la narrativa.

Antes de construir un sistema de diapositivas dentro de mi sitio Astro, evalué cada opción seria en este espacio. Este post es esa comparación — los criterios, las herramientas y los tradeoffs que llevaron a mi elección.

¿Qué hace buena a una herramienta slides-as-code?

Antes de entrar en las herramientas, estos son los criterios que evalué:

• Soporte de Markdown — ¿Puedo escribir diapositivas en archivos .md sin salir de mi editor?
• Resaltado de código — ¿Resaltado de sintaxis con revelado progresivo (resaltar líneas paso a paso)?
• Soporte matemático — ¿KaTeX o MathJax para ecuaciones?
• Temas — ¿Temas basados en CSS que coincidan con el sistema de diseño de mi sitio?
• Exportación a PDF — ¿Para conferencias que requieren envíos en PDF?
• Dependencia de framework — ¿Me obliga a usar React, Vue u otro runtime?
• Incrustabilidad — ¿Puedo incrustar el resultado dentro de un sitio existente (no solo como app independiente)?
• Compatibilidad con Git — ¿El formato fuente es diffable, mergeable, revisable?
• Mantenimiento activo — ¿El proyecto sigue mantenido?
• Curva de aprendizaje — ¿Qué tan rápido puedo ir de cero a mi primera presentación?

Reveal.js — El veterano

revealjs.com · ~71k estrellas en GitHub · JavaScript vanilla · v6.0 (marzo 2026)

Reveal.js es el abuelo de las presentaciones web. Creado por Hakim El Hattab hace casi 15 años, sigue siendo el framework de presentaciones HTML más destacado por amplio margen.

Lo que lo distingue:

• Cero dependencia de framework. JavaScript vanilla. Funciona con Astro, Next, Svelte, HTML plano — cualquier cosa que sirva una página web.
• Ecosistema de plugins. Markdown, resaltado de sintaxis, matemáticas (KaTeX/MathJax), notas del presentador, multiplexing, búsqueda — todo como plugins componibles.
• Sistema de fragmentos. El sistema de revelado progresivo más expresivo: fade-up, fade-in-then-out, grow, shrink, highlight-red, strike, con ordenamiento explícito.
• Auto-animación. Transiciones mágicas entre diapositivas mediante coincidencia de data-id.
• Resaltado de código con revelado por pasos. Escribe ```js [1-3|5|7-9] ` y Reveal avanza por rangos de líneas resaltadas en cada clic.
• Fondos de pantalla completa. Color, imagen, video (con loop/muted), o incluso un iframe en vivo como fondo.
• Exportación a PDF. Agrega ?print-pdf a cualquier URL de presentación y Chrome lo imprime perfectamente.
• v6. La última versión trajo builds basados en Vite, tipos TypeScript incluidos y un wrapper oficial para React.

La compensación: Comparado con otras herramientas, Reveal pide un poco más de setup inicial y la curva de aprendizaje es algo más pronunciada. Las diapositivas son elementos HTML <section> (con un plugin opcional de Markdown), así que estás más cerca del metal. La ventaja es control total.

Ideal para: Presentaciones altamente personalizadas, portafolios, incrustación dentro de sitios existentes, equipos que necesitan extensibilidad de plugins sin atarse a un framework.

Slidev — El rey de la experiencia de desarrollo

sli.dev · ~46k estrellas en GitHub · Vue 3 + Vite

Slidev es lo que pasa cuando alguien dice “¿qué tal si la experiencia de IDE para diapositivas fuera tan buena como para código?” Está construido específicamente para desarrolladores presentando contenido técnico, y se nota.

Lo que lo distingue:

• Componentes Vue en línea. Puedes poner <Tweet id="..." />, <Youtube id="..." />, o cualquier componente Vue directamente en tus diapositivas Markdown.
• Resaltado de código Shiki con animaciones. Resaltado línea por línea que anima, no solo alterna.
• Editor Monaco. Integra un editor tipo VS Code en tus diapositivas para demos de código en vivo.
• Grabación integrada. Graba tu presentación con overlay de webcam y exporta como video.
• Diagramas Mermaid. Soporte nativo para diagramas de secuencia, flujos, etc.
• Temas como paquetes npm. Temas de la comunidad instalables via npm install.

La compensación: Slidev es una aplicación Vue/Vite independiente, no una librería que incrustas. Ejecutas slidev build y obtienes una SPA estática. Si quieres diapositivas dentro de un sitio web existente que no es Vue (como un sitio Astro o Next.js), necesitarías mantener un pipeline de build separado, perder las Content Collections, el sistema i18n, el toggle de tema, la infraestructura SEO/AEO, y la integración con el sitemap del sitio host.

Ideal para: Charlas de conferencia para desarrolladores donde la presentación ES el producto. Equipos que ya usan Vue. Speakers que quieren grabación y código en vivo integrados.

Marp — El minimalista

marp.app · ~3.5k estrellas (CLI) · Framework Marpit · CommonMark

Marp es la herramienta que demuestra que las restricciones generan claridad. Escribe CommonMark Markdown. Agrega un frontmatter YAML para tema y paginación. Usa --- para separar diapositivas. Listo.

Lo que lo distingue:

• Curva de aprendizaje más plana. Si conoces Markdown, conoces el 95% de Marp.
• Extensión para VS Code. Vista previa en vivo mientras escribes, con recarga automática.
• Exportación a PPTX. La única herramienta en esta lista que exporta directamente a PowerPoint.
• Integración CI/CD. Marp + GitHub Actions = diapositivas renderizadas automáticamente en cada push.
• Tasa de error con LLMs casi cero. El formato es tan mínimo que las herramientas de IA casi nunca producen Markdown Marp inválido.

La compensación: Interactividad limitada. No tiene fragmentos (revelado progresivo al hacer clic). No tiene demos de código en vivo. El sistema de estilos es poderoso (CSS completo) pero los valores por defecto son de grado presentación, no de grado experiencia web.

Ideal para: Diapositivas rápidas de Markdown a PDF. Presentaciones de sprint review. Documentación como diapositivas. Equipos que quieren diapositivas en su pipeline de CI sin ceremonia.

Spectacle — El nativo de React

formidable.com/open-source/spectacle · ~10k estrellas en GitHub · React 18+

Spectacle toma el enfoque opuesto a Marp: si conoces React, ya conoces Spectacle. Las diapositivas son componentes JSX.

Lo que lo distingue:

• Ecosistema completo de React. Cualquier librería de React funciona en tus diapositivas — gráficos, mapas, visualización de datos, demos interactivas.
• Vista previa de código en vivo. Muestra código ejecutándose junto a su fuente, editable en tiempo real.
• Soporte Markdown. Via el componente MarkdownSlideSet, para quienes prefieren escribir sobre JSX.
• Mantenimiento activo. v10.2.3 (octubre 2025), más de 180 contribuidores en 10 años.

La compensación: Requiere React 18+. El bundle es más pesado que Reveal o Marp. Si tu sitio no es React, agregar Spectacle significa agregar un segundo runtime de framework.

Ideal para: Equipos de React que quieren diapositivas que se sientan como su código de producto. Presentaciones con elementos interactivos pesados o visualización de datos.

Menciones honorables

Impress.js (~38k estrellas) — La experiencia tipo Prezi en JavaScript vanilla. Diapositivas posicionadas en espacio 3D con transformaciones CSS. Espectacular para narrativas espaciales, pero nicho.

WebSlides (~6k estrellas) — Hermosos valores por defecto con 40+ componentes reutilizables. Navegación horizontal y vertical. Menos mantenido activamente pero funcional.

Pandoc + Beamer — El pipeline LaTeX. Escribe Markdown, convierte a PDF Beamer via Pandoc. Ideal para academia.

Plataformas en línea y con IA

No todo necesita ser código. Aquí es cuando las plataformas en la nube tienen más sentido:

Plataforma	Fortaleza	Ideal para
Gamma	Genera presentaciones completas desde prompts	Presentaciones rápidas generadas por IA
Pitch	Edición colaborativa en tiempo real	Pitch decks para equipos
Beautiful.ai	Motor de diseño IA que auto-organiza contenido	Presentaciones con diseño pesado sin diseñador
slides.com	Editor WYSIWYG construido sobre Reveal.js por el mismo autor	Decks estilo Reveal sin escribir código
Google Slides	Compatibilidad universal	Entornos corporativos, colaboración entre equipos
Canva	Biblioteca masiva de plantillas	Presentadores no técnicos

La tabla comparativa completa

Característica	Reveal.js	Slidev	Marp	Spectacle
Tecnología	JS vanilla	Vue 3/Vite	Node.js	React 18+
Markdown	Plugin	Nativo	Nativo	Componente
Dependencia	Ninguna	Vue	Ninguna	React
Código	Revelado por pasos	Animaciones Shiki	Básico	Vista previa
Matemáticas	KaTeX/MathJax	KaTeX	MathJax/KaTeX	Limitado
Fragmentos	Rico	Básico	No	Básico
Auto-animación	Sí	Sí	Morphing (v4)	No
Exportar PDF	?print-pdf	Sí	Nativo (+ PPTX)	Sí
Incrustable	Sí	No (independiente)	Limitado	No (independiente)
Ext. VS Code	No	No	Sí	No
Grabación	No	Integrada	No	No
Estrellas GitHub	~71k	~46k	~3.5k	~10k
Curva aprendizaje	Media	Media (Vue ayuda)	Baja	Media (React)

Mi elección — y por qué (slides-as-code dentro de mi propio sitio)

Quería integrar un sistema slides-as-code dentro de mi propio sitio para mis charlas técnicas — que xergioalex.com mismo fuera el host de los decks, no un servicio externo. Por eso elegí Reveal.js.

El factor decisivo no fue que Reveal tenga la mejor experiencia de desarrollo (Slidev gana ahí) ni la curva de aprendizaje más plana (Marp gana). Fue la incrustabilidad.

Necesitaba que las diapositivas vivieran dentro de mi sitio web Astro — como contenido de primera clase, con el mismo soporte multilingüe, el mismo sistema de temas, la misma infraestructura SEO y AEO que mis posts del blog. Reveal es JavaScript vanilla que puedo inicializar en un componente Svelte, dentro de un layout Astro, importando CSS solo en las páginas de presentación. Sin segundo runtime de framework. Sin pipeline de build separado.

En el siguiente post de esta serie, recorreré exactamente cómo lo construí: un catálogo de dos tipos de presentaciones con esquemas de unión discriminada, renderizado de Markdown en tiempo de build, aislamiento de assets, gemelos AEO, y sincronización de tema oscuro/claro en vivo.

Recursos

• Reveal.js — Sitio oficial
• Slidev — Sitio oficial
• Marp — Sitio oficial
• Spectacle — Sitio oficial
• Impress.js — Sitio oficial
• Gamma — Plataforma de presentaciones IA
• Pitch — Presentaciones colaborativas