reveal.js: temas, exportação e como ele se compara às alternativas
O reveal.js é o framework de apresentações HTML de código aberto com 71,9k estrelas no GitHub — você escreve os slides em HTML ou Markdown e apresenta em qualquer navegador. Aqui vai um guia honesto: como funcionam temas, modelos e exemplos, como a exportação para PDF e PowerPoint realmente se comporta, como ele se compara ao Slidev e ao Marp, e onde entra um espaço de design agent-native.
Se você escreve código e precisa fazer uma palestra, provavelmente já esbarrou no reveal.js. É o framework de código aberto por trás de boa parte dos slides de conferências de desenvolvedores que você já assistiu: você escreve cada slide em HTML ou Markdown, e ele roda como uma página web em qualquer navegador — com temas, transições, animações de fragmentos, notas do apresentador e exportação nativa para PDF já embutidas. Com 71,9k estrelas no GitHub e licença MIT, é a resposta padrão para "como faço slides sem abrir o PowerPoint".
Este guia é um mapa honesto disso tudo. O que o reveal.js realmente é, como temas, modelos e exemplos se encaixam, como a exportação para PDF e PowerPoint de fato se comporta (há uma pegadinha), como ele se sai diante dos outros concorrentes de código aberto e — a parte que a maioria dos artigos pula — onde um framework assim deixa de ser a ferramenta certa e outra coisa assume. Se você está pesando suas opções para um fluxo de criação de apresentações assistido por IA e agentes, ajuda saber exatamente o que o reveal.js é e o que não é.
O que é o reveal.js
O reveal.js se autodenomina "The HTML Presentation Framework", e essa descrição é precisa. Não é um aplicativo que você abre e no qual clica por aí — é uma biblioteca JavaScript que você insere em um arquivo HTML. Cada slide é um elemento <section>; aninhe seções e você obtém slides verticais. Você estiliza tudo com CSS, conecta transições e fragmentos com atributos data e apresenta abrindo a página em um navegador. Como a saída é uma página web, tudo o que a web sabe fazer — código ao vivo, vídeo incorporado, iframes, WebGL, seus próprios componentes — pode viver em um slide.
O trade-off está ali mesmo, na definição: isto é um framework para desenvolvedores, não uma interface gráfica. Suas ferramentas são um editor de código e um navegador, não uma tela com alças de arrasto. É exatamente por isso que os desenvolvedores o adoram — controle de versão total, controle total do CSS, sem formato de arquivo proprietário — e exatamente por isso que quem não programa vai bater e voltar. Ele também é genuinamente gratuito: sem conta, sem marca-d'água, sem limite de exportação, sem cobrança por assento. O HTML é seu.
Temas, modelos e exemplos
A maioria das buscas em torno do reveal.js é, na verdade, sobre como deixá-lo bonito sem projetar do zero, então aqui está como as peças se encaixam.
Temas do reveal.js são o ponto de partida embutido. O framework vem com um conjunto de temas prontos — Black, White, League, Beige, Sky, Night, Serif, Simple, Solarized e outros — que você troca alterando um único link de folha de estilo. Um tema é apenas CSS, então um "tema personalizado do reveal.js" significa escrever (ou fazer um fork de) um arquivo Sass/CSS que define suas fontes, cores e estilos de título. Não há uma loja de temas; você está editando folhas de estilo.
Modelos e exemplos do reveal.js vivem principalmente na comunidade, e não em uma galeria oficial única. O repositório traz apresentações de exemplo, o site de documentação (revealjs.com) é ele próprio uma apresentação reveal.js cujo código-fonte você pode ler, e o GitHub está cheio de modelos iniciais, boilerplates e wrappers de framework. Se você procura por "reveal js examples", o de maior valor é o próprio código-fonte do site oficial — ele demonstra quase todos os recursos em uso. A pegadinha para iniciantes: aqui um "modelo" é um repositório de código para clonar e editar, não um arquivo de design que você preenche.
Exportando para PowerPoint e PDF
A exportação para PDF é um recurso de primeira classe, embutido, e funciona bem. Acrescente ?print-pdf à URL da sua apresentação, abra a caixa de diálogo de impressão do navegador, escolha "Salvar como PDF", e o reveal.js reflui cada slide para a sua própria página. Este é o caminho limpo e suportado — o PDF que você obtém fica exatamente igual aos seus slides.
Exportar o reveal.js para PowerPoint é onde as expectativas precisam ser administradas. Não existe um "Salvar como .pptx" nativo que produza um arquivo de PowerPoint editável. O caminho prático é a conversão PDF → PPTX, e essa conversão tem perdas: cada slide chega ao PowerPoint como uma imagem chapada, não como caixas de texto, formas e layouts editáveis. Então, se alguém mais adiante precisa abrir sua apresentação no PowerPoint e editá-la — redigitar um título, reestilizar um gráfico, reorganizar um marcador — o reveal.js não é a ferramenta que lhe dá isso. Ele é feito para ser apresentado a partir do navegador, e sua fonte editável é HTML, não .pptx. Saber disso antes de começar poupa você de uma surpresa dolorosa no dia em que um colega pedir "o PowerPoint".
Alternativas ao reveal.js e a comparação
O reveal.js não é a única maneira de escrever slides como código. As duas alternativas de código aberto mais próximas — as que as pessoas querem dizer com "alternativa ao reveal.js" — são Slidev e Marp, e vale ser honesto: o Open Design fica em uma camada totalmente diferente, em vez de competir de frente.
| Ferramenta | Redação | .pptx editável | Templating | Licença |
|---|---|---|---|---|
| reveal.js | HTML ou Markdown | Não (PDF→PPTX são imagens com perdas) | Temas = CSS/Sass; modelos da comunidade | MIT |
| Slidev | Markdown + Vue | Não (exportação em imagem/PDF) | Componentes Vue + temas | MIT |
| Marp | Somente Markdown | Não (PDF/PPTX como imagens) | Temas de Markdown (CSS) | MIT |
| Open Design | Descreva ao seu agente | Sim — saída editável contra um design system | Modelos de apresentação próprios | Apache-2.0 |
Slidev é o irmão filosoficamente mais próximo: é Markdown em primeiro lugar, com componentes Vue por baixo, então ele troca parte da liberdade de HTML puro do reveal.js por um fluxo de redação mais estruturado e ergonômico para desenvolvedores. Se você vive no mundo Vue/Vite e quer demos de código ao vivo, o Slidev é a escolha natural. Marp vai na direção oposta — apenas Markdown, deliberadamente minimalista, sem componentes — o que o torna o caminho mais rápido quando seus slides são majoritariamente texto e você nunca quer pensar em um framework.
Os três são frameworks code-first com a mesma forma fundamental: você escreve a apresentação, você apresenta em um navegador, e a saída editável em PowerPoint não é realmente o ponto. Escolher entre eles é, sobretudo, uma questão de qual superfície de redação você quer (HTML puro, Markdown com Vue ou Markdown simples) — não de recursos que um tem e os outros não.
Onde o Open Design se encaixa
Aqui vai a fronteira honesta. O reveal.js pede que você escreva a apresentação — cada slide, em código. Isso é uma vantagem se você quer controle artesanal do HTML, e nada aqui o substitui se esse for o seu objetivo.
Open Design é uma camada diferente, e é um produto que nós fazemos, então leia isto com isso em mente. É um Agent-Native Design Workspace de código aberto (Apache-2.0), local-first e com a sua própria chave, que fica fora do agente de código que você já usa — Claude Code, Codex ou Cursor. Em vez de redigir o HTML à mão, você descreve a apresentação que quer e o agente gera uma editável contra um design system, de modo que ela sai alinhada à marca e permanece editável, em vez de congelar como um artefato renderizado. O Open Design também traz modelos de apresentação próprios para você começar.
Não é um substituto do reveal.js se o que você quer é escrever slides como código com controle total do CSS — esse é o território do reveal.js e ele é excelente nisso. O Open Design é para o caso em que você preferiria dar um briefing a um agente do que escrever marcação, quer que a saída combine com um design system ao longo de muitas apresentações e quer, no fim, arquivos editáveis que sejam seus. Recorra ao reveal.js quando a apresentação for o código que você escreve; recorra a um espaço de trabalho quando a apresentação for uma entre muitas saídas alinhadas à marca que um agente produz para você.
Perguntas frequentes
O reveal.js é gratuito? Sim. O reveal.js é código aberto sob licença MIT — gratuito para uso comercial, sem conta, sem marca-d'água e sem limites de exportação. Você mesmo hospeda o HTML.
Como adiciono ou troco um tema do reveal.js? O reveal.js vem com temas embutidos (Black, White, League, Sky, Night, Serif e outros) que você troca alterando um link de folha de estilo. Um tema personalizado significa escrever ou fazer um fork de um arquivo CSS/Sass com suas próprias fontes e cores — não há uma loja de temas para navegar.
Posso exportar o reveal.js para PowerPoint? Para um .pptx editável, não. O reveal.js exporta de forma limpa para PDF (acrescente ?print-pdf e imprima para PDF pelo navegador). Converter esse PDF em PowerPoint é possível, mas com perdas — cada slide vira uma imagem chapada, não texto e formas editáveis. Se você precisa de um PowerPoint editável, o reveal.js não é a fonte certa.
reveal.js vs Slidev vs Marp — qual devo usar? Os três são código aberto, code-first e licenciados sob MIT. Escolha reveal.js para controle de HTML puro, Slidev para Markdown mais componentes Vue (ótimo para demos ao vivo) e Marp para as apresentações mais simples, só de Markdown. Nenhum mira a saída editável em PowerPoint.
Preciso saber programar para usar o reveal.js? Na prática, sim. O reveal.js é um framework para desenvolvedores — você trabalha em um editor de texto com HTML, Markdown e CSS, não em uma interface gráfica de arrastar e soltar. Se você prefere descrever uma apresentação em linguagem natural, essa é a lacuna que um espaço de trabalho agent-native como o Open Design preenche.
O resumo
O reveal.js merece suas 71,9k estrelas: é uma forma gratuita, licenciada sob MIT e nativa de HTML de construir slides que rodam em qualquer lugar onde um navegador rode, com temas de verdade, exportação limpa para PDF e controle total do CSS. Só entre de olhos abertos — é um framework no qual você escreve, não um aplicativo pelo qual você clica, e "exportar para um PowerPoint editável" não é algo que ele faz. Se você quer redigir apresentações como código, o reveal.js (ou Slidev / Marp) é um ótimo lar. Se você prefere descrever uma apresentação e ter seu agente gerando uma editável, alinhada à marca e sua, é aí que um Agent-Native Design Workspace assume.