reveal.js: temas, exportación y cómo se compara con las alternativas
reveal.js es el framework de presentaciones HTML de código abierto con 71,9k estrellas en GitHub: creas las diapositivas en HTML o Markdown y las presentas en cualquier navegador. Aquí tienes una guía sincera: cómo funcionan los temas, las plantillas y los ejemplos, cómo se comporta realmente la exportación a PDF y PowerPoint, cómo se compara con Slidev y Marp, y dónde encaja un espacio de diseño agent-native.
Si escribes código y necesitas dar una charla, probablemente ya te has topado con reveal.js. Es el framework de código abierto que hay detrás de una enorme parte de las diapositivas de conferencias de desarrolladores que has visto: escribes cada diapositiva en HTML o Markdown, y se ejecuta como una página web en cualquier navegador, con temas, transiciones, animaciones de fragmentos, notas del ponente y exportación nativa a PDF ya integradas. Con 71,9k estrellas en GitHub y licencia MIT, es la respuesta por defecto a «cómo hago diapositivas sin abrir PowerPoint».
Esta guía es un mapa sincero de todo ello. Qué es realmente reveal.js, cómo encajan temas, plantillas y ejemplos, cómo se comporta de verdad la exportación a PDF y a PowerPoint (hay una trampa), cómo se compara con los demás contendientes de código abierto y —la parte que la mayoría de los artículos omite— dónde un framework así deja de ser la herramienta adecuada y otra cosa toma el relevo. Si estás sopesando tus opciones para un flujo de creación de presentaciones asistido por IA y agentes, ayuda saber exactamente qué es y qué no es reveal.js.
Qué es reveal.js
reveal.js se define a sí mismo como «The HTML Presentation Framework», y esa descripción es precisa. No es una aplicación que abres y por la que haces clic: es una biblioteca de JavaScript que colocas en un archivo HTML. Cada diapositiva es un elemento <section>; anida secciones y obtienes diapositivas verticales. Lo estilizas todo con CSS, conectas transiciones y fragmentos con atributos data y presentas abriendo la página en un navegador. Como la salida es una página web, todo lo que la web puede hacer —código en vivo, vídeo incrustado, iframes, WebGL, tus propios componentes— puede vivir en una diapositiva.
El compromiso está ahí mismo, en la definición: esto es un framework para desarrolladores, no una interfaz gráfica. Tus herramientas son un editor de código y un navegador, no un lienzo con tiradores de arrastre. Por eso precisamente lo adoran los desarrolladores —control de versiones total, control total del CSS, sin formato de archivo propietario— y por eso precisamente quien no programa rebotará contra él. También es genuinamente gratis: sin cuenta, sin marca de agua, sin tope de exportación, sin precio por asiento. El HTML es tuyo.
Temas, plantillas y ejemplos
La mayoría de las búsquedas en torno a reveal.js van en realidad sobre cómo hacer que luzca bien sin diseñar desde cero, así que aquí va cómo encajan las piezas.
Los temas de reveal.js son el punto de partida integrado. El framework incluye un conjunto de temas listos —Black, White, League, Beige, Sky, Night, Serif, Simple, Solarized y más— que cambias modificando un único enlace a una hoja de estilos. Un tema es solo CSS, así que un «tema personalizado de reveal.js» significa escribir (o bifurcar) un archivo Sass/CSS que fije tus fuentes, colores y estilos de títulos. No hay una tienda de temas; estás editando hojas de estilo.
Las plantillas y ejemplos de reveal.js viven sobre todo en la comunidad, más que en una galería oficial única. El repositorio incluye presentaciones de ejemplo, el sitio de documentación (revealjs.com) es en sí mismo una presentación de reveal.js cuyo código puedes leer, y GitHub está lleno de plantillas de inicio, andamiajes y envoltorios de framework. Si buscas «reveal js examples», el de mayor valor es el propio código del sitio oficial: demuestra casi todas las funciones en su sitio. La trampa para principiantes: aquí una «plantilla» es un repositorio de código que clonas y editas, no un archivo de diseño que rellenas.
Exportar a PowerPoint y PDF
La exportación a PDF es una función de primera clase, integrada, y funciona bien. Añade ?print-pdf a la URL de tu presentación, abre el cuadro de impresión de tu navegador, elige «Guardar como PDF» y reveal.js recompone cada diapositiva en su propia página. Este es el camino limpio y admitido: el PDF que obtienes se ve exactamente como tus diapositivas.
Exportar reveal.js a PowerPoint es donde hay que gestionar las expectativas. No existe un «Guardar como .pptx» nativo que produzca un archivo de PowerPoint editable. La vía práctica es la conversión PDF → PPTX, y esa conversión tiene pérdidas: cada diapositiva llega a PowerPoint como una imagen plana, no como cuadros de texto, formas y diseños editables. Así que si alguien más adelante necesita abrir tu presentación en PowerPoint y editarla —reescribir un titular, recomponer un gráfico, redistribuir una viñeta— reveal.js no es la herramienta que se lo dará. Está hecho para presentarse desde el navegador, y su fuente editable es HTML, no .pptx. Saberlo antes de empezar te ahorra una sorpresa dolorosa el día en que un colega pida «el PowerPoint».
Alternativas a reveal.js y su comparación
reveal.js no es la única manera de escribir diapositivas como código. Las dos alternativas de código abierto más cercanas —las que la gente quiere decir con «alternativa a reveal.js»— son Slidev y Marp, y conviene ser honestos: Open Design se sitúa en una capa completamente distinta en lugar de competir de frente.
| Herramienta | Redacción | .pptx editable | Plantillado | Licencia |
|---|---|---|---|---|
| reveal.js | HTML o Markdown | No (PDF→PPTX son imágenes con pérdidas) | Temas = CSS/Sass; plantillas de la comunidad | MIT |
| Slidev | Markdown + Vue | No (exportación a imagen/PDF) | Componentes Vue + temas | MIT |
| Marp | Solo Markdown | No (PDF/PPTX como imágenes) | Temas de Markdown (CSS) | MIT |
| Open Design | Descríbeselo a tu agente | Sí — salida editable contra un design system | Plantillas de presentación propias | Apache-2.0 |
Slidev es el hermano filosófico más próximo: es Markdown primero, con componentes Vue por debajo, de modo que cambia parte de la libertad de HTML puro de reveal.js por un flujo de redacción más estructurado y ergonómico para desarrolladores. Si vives en el mundo Vue/Vite y quieres demos de código en vivo, Slidev es la elección natural. Marp va en la otra dirección —solo Markdown, deliberadamente minimalista, sin componentes—, lo que lo convierte en la vía más rápida cuando tus diapositivas son sobre todo texto y nunca quieres pensar en un framework.
Los tres son frameworks code-first con la misma forma fundamental: escribes la presentación, la presentas en un navegador y la salida editable a PowerPoint no es realmente el objetivo. Elegir entre ellos es sobre todo cuestión de qué superficie de redacción quieres (HTML puro, Markdown con Vue o Markdown a secas), no de capacidades que uno tenga y a los otros les falten.
Dónde encaja Open Design
Aquí va la frontera honesta. reveal.js te pide escribir la presentación: cada diapositiva, en código. Eso es una virtud si quieres control artesanal del HTML, y nada de aquí lo sustituye si ese es tu objetivo.
Open Design es una capa distinta, y es un producto que hacemos nosotros, así que léelo teniéndolo en cuenta. Es un Agent-Native Design Workspace de código abierto (Apache-2.0), local-first y con tu propia clave, que se sitúa fuera del agente de código que ya usas: Claude Code, Codex o Cursor. En lugar de redactar el HTML a mano, describes la presentación que quieres y el agente genera una editable contra un design system, de modo que sale acorde a la marca y sigue siendo editable en vez de congelarse como un artefacto renderizado. Open Design también incluye plantillas de presentación propias desde las que empezar.
No es un reemplazo de reveal.js si lo que quieres es escribir diapositivas como código con control total del CSS: ese es el terreno de reveal.js y ahí es excelente. Open Design es para el caso en que preferirías dar instrucciones a un agente antes que escribir marcado, quieres que la salida coincida con un design system a lo largo de muchas presentaciones y quieres archivos editables que sean tuyos al final. Recurre a reveal.js cuando la presentación sea el código que escribes; recurre a un espacio de trabajo cuando la presentación sea una más entre muchas salidas acordes a la marca que un agente produce para ti.
Preguntas frecuentes
¿reveal.js es gratis? Sí. reveal.js es de código abierto bajo licencia MIT: gratis para uso comercial, sin cuenta, sin marca de agua y sin límites de exportación. Tú mismo alojas el HTML.
¿Cómo añado o cambio un tema de reveal.js? reveal.js incluye temas integrados (Black, White, League, Sky, Night, Serif y más) que cambias modificando un enlace a una hoja de estilos. Un tema personalizado significa escribir o bifurcar un archivo CSS/Sass con tus propias fuentes y colores; no hay una tienda de temas que explorar.
¿Puedo exportar reveal.js a PowerPoint? A un .pptx editable, no. reveal.js exporta limpiamente a PDF (añade ?print-pdf e imprime a PDF desde el navegador). Convertir ese PDF a PowerPoint es posible pero con pérdidas: cada diapositiva aterriza como una imagen plana, no como texto y formas editables. Si necesitas un PowerPoint editable, reveal.js no es la fuente adecuada.
reveal.js vs Slidev vs Marp: ¿cuál debería usar? Los tres son de código abierto, code-first y con licencia MIT. Elige reveal.js para control de HTML puro, Slidev para Markdown más componentes Vue (genial para demos en vivo) y Marp para las presentaciones más simples de solo Markdown. Ninguno apunta a la salida editable a PowerPoint.
¿Necesito saber programar para usar reveal.js? En la práctica, sí. reveal.js es un framework para desarrolladores: trabajas en un editor de texto con HTML, Markdown y CSS, no en una interfaz gráfica de arrastrar y soltar. Si prefieres describir una presentación en lenguaje natural, ese es el vacío que llena un espacio de trabajo agent-native como Open Design.
La conclusión
reveal.js se gana sus 71,9k estrellas: es una manera gratuita, con licencia MIT y nativa de HTML de construir diapositivas que funcionan en cualquier lugar donde haya un navegador, con temas de verdad, exportación limpia a PDF y control total del CSS. Solo entra con los ojos abiertos: es un framework en el que escribes, no una aplicación por la que haces clic, y «exportar a un PowerPoint editable» no es algo que haga. Si quieres redactar presentaciones como código, reveal.js (o Slidev / Marp) es un gran hogar. Si prefieres describir una presentación y que tu agente genere una editable, acorde a la marca y tuya, ahí es donde toma el relevo un Agent-Native Design Workspace.