reveal.js

reveal.js is an open-source HTML presentation framework where slides are plain HTML or Markdown, which makes it ideal for AI/agent-generated decks.

Table of Contents
reveal.js - The HTML Presentation Framework
Open source framework for building presentations with web technology.
https://revealjs.com/
hakimel/reveal.js
Source, issues, releases. MIT licensed, ~72k stars.
https://github.com/hakimel/reveal.js

What it is

reveal.js is an open-source framework for building presentations that run in a browser. A deck is an HTML page: each slide is a <section>, and the library handles navigation, transitions, themes, and the speaker view. It ships under the MIT license and has been maintained by Hakim El Hattab (@hakimel) since 2011. Current major version is 6.x.

The output is a self-contained web page. No PowerPoint, no Keynote, no proprietary file format. You version it in git, host it anywhere static, and present it from any device with a browser.

Why it exists

Hakim built it to escape slide editors and write presentations the way he wrote everything else: in code. The payoff is that everything a browser can do becomes a slide. Live demos, embedded iframes, video backgrounds, syntax-highlighted code that actually runs, charts pulled from a JS library. A deck is just a web page, so the full web platform is available.

The same team runs Slides.com, a hosted graphical editor built on reveal.js. Slides.com is the commercial product (paid plans, in-browser WYSIWYG, hosting); the reveal.js library is free and open source. Slides.com sponsors the project. You can use reveal.js forever without touching Slides.com.

Why it fits AI / agent generation

This is the reason it belongs in my toolkit. A deck is plain HTML and Markdown an LLM can emit directly, with no intermediate format and no binary to manipulate.

  • Pure text output. An agent writes <section> blocks or Markdown fences. No python-pptx object model, no XML wrangling, no layout engine to fight. The model already knows HTML and Markdown cold.
  • No build step. Point three <link>/<script> tags at a CDN and the file runs by double-clicking it. An agent can produce one .html file that opens immediately, with nothing to install.
  • Markdown mode. Write the whole deck in Markdown inside a data-markdown section. --- separates horizontal slides, -- separates vertical ones. This is close to how an LLM wants to write a deck anyway.
  • Deterministic and inspectable. The output is readable text I can diff, edit by hand, and re-prompt against. When the model gets a slide wrong, I fix the HTML directly instead of regenerating a binary.

For first-draft decks I edit before presenting, this is the cleanest target an LLM can hit. Compared to generating .pptx, it removes an entire layer of brittleness.

Authoring a deck

Two ways to write slides, mixable in one deck.

HTML sections - one <section> per slide. Nest a <section> inside another to create a vertical stack under that slide.

<div class="reveal">
  <div class="slides">
    <section>Single horizontal slide</section>
    <section>
      <section>Top of a vertical stack</section>
      <section>Below it - press the down arrow</section>
    </section>
  </div>
</div>

Markdown - set data-markdown on a section and write plain Markdown. Needs the Markdown plugin enabled.

<section data-markdown>
  <textarea data-template>
    ## Slide one
    Some bullet points:
    - first
    - second
    ---
    ## Slide two
    Separated by a horizontal rule.
  </textarea>
</section>

Core features

Feature What it does
Vertical / nested slides Two-dimensional decks: horizontal sections with vertical sub-slides underneath.
Fragments Reveal elements one at a time inside a slide (class="fragment"), with styles like fade, grow, highlight.
Themes Bundled CSS themes (black, white, league, sky, solarized, and more). Swap one <link>.
Transitions Per-deck or per-slide: none, fade, slide, convex, concave, zoom.
Auto-Animate Add data-auto-animate to two slides and matching elements tween between them. Good for build-ups and morphs.
Speaker view Press S for a separate window with notes, a timer, and the next-slide preview.
Speaker notes <aside class="notes"> per slide, shown only in speaker view.
Code highlighting highlight.js built in. Supports line numbers and step-through line highlighting.
Math data-math via the MathJax/KaTeX plugin for LaTeX equations.
PDF export Append ?print-pdf to the URL and print to PDF from the browser.
Backgrounds Per-slide color, image, video, gradient, or iframe backgrounds.
Plugins Markdown, Highlight, Notes, Math, Search, Zoom ship in the box; third-party plugins extend it.
JS API Reveal.on(...), Reveal.slide(...), events and methods to script behaviour.

Install and use

CDN, single file (the AI-friendly path). One HTML file, three references to jsDelivr, no install. This is the full minimal skeleton:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@6/dist/reset.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@6/dist/reveal.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@6/dist/theme/black.css">
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>Slide 1</section>
        <section>Slide 2</section>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@6/dist/reveal.js"></script>
    <script>
      Reveal.initialize();
    </script>
  </body>
</html>

Save it, open it, present it. That is the whole workflow.

npm, for app integration or a build pipeline:

npm install reveal.js

import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
import 'reveal.js/dist/reveal.css';
import 'reveal.js/dist/theme/black.css';

let deck = new Reveal({ plugins: [Markdown] });
deck.initialize();

Full setup, to hack on the framework itself (needs Node 20.19+):

git clone https://github.com/hakimel/reveal.js.git
cd reveal.js && npm install
npm start   # serves at http://localhost:8000

Limitations

  • CSS is the layout engine. No drag-and-drop canvas. Precise positioning means writing CSS, and pixel-perfect layouts take real effort versus a WYSIWYG tool.
  • Text-heavy corporate decks fight the grain. It shines for technical and visual talks. Dense, table-laden sales decks are often faster in PowerPoint.
  • PDF export is print-based. It goes through the browser print dialog and complex animations or fragments do not always survive cleanly. Fine for handouts, not a substitute for the live deck.
  • Theming has a learning curve. Going beyond the bundled themes means understanding the Sass/CSS variables.
  • Not a collaboration tool on its own. Real-time co-editing and hosting are what Slides.com sells. The raw library is single-author files in git.

vs Slidev and Marp

The three main code-first deck frameworks, and how I separate them:

reveal.js Slidev Marp
Authoring HTML sections or Markdown Markdown (Vue-powered) Pure Markdown (CommonMark)
Runtime Plain JS, runs from a CDN Vite + Vue dev server Markdown to HTML/PDF/PPTX
Build step None for the basic path Yes (Node project) CLI or VS Code extension
Best for Browser-native decks, max flexibility, no-build agent output Developer talks wanting Vue components and live coding Fast, plain-Markdown decks and clean PDF/PPTX export
AI-generation fit Strong: emit one HTML file, no tooling Good Markdown, but needs a Node project to render Strong: pure Markdown, exports to PPTX

Short version: reveal.js is the most flexible and the only one that renders a finished deck from a single CDN-linked HTML file with zero tooling, which makes it the safest default for agent-generated slides. Slidev trades that simplicity for Vue components and a slicker developer experience, at the cost of a Node build. Marp is the most minimal: if the deck is plain Markdown and the deliverable is a PDF or a .pptx, Marp is the shortest path.

Further reading