reveal.js Presentations

Create web-based presentations as single HTML files using reveal.js v5 via CDN.

Quick Start

1. 1. Copy assets/template.html to the project directory
2. Replace {{TITLE}}, {{SUBTITLE}}, {{THEME}} placeholders
3. Add slides as <section> elements inside INLINECODE5
4. Open in browser or deploy to Vercel/GitHub Pages

Slide Structure

CODEBLOCK0

Key Features

Fragments (click-to-reveal)

<p class="fragment fade-up">Appears on click</p>
<p class="fragment fade-up">Then this</p>

Styles: fade-in (default), fade-up, fade-down, fade-left, fade-right, fade-out, fade-in-then-out, grow, shrink, strike, INLINECODE16

Auto-Animate

Add data-auto-animate to adjacent sections — matching elements animate automatically: CODEBLOCK2

Backgrounds

CODEBLOCK3

Speaker Notes

CODEBLOCK4

Viewport Sizing

Set width and height in Reveal.initialize(). reveal.js scales the content to fit the browser window. Use larger values (e.g. 1400×800) if content looks too large on screen — the framework scales down automatically.

CODEBLOCK5

Custom Styling

Use a separate style.css file or inline <style> block. Override reveal.js defaults:

CODEBLOCK6

For grid backgrounds (like danielgrobelny.de):
CODEBLOCK7

Themes

Built-in: black, white, league, beige, night, serif, simple, solarized, moon, dracula, sky, blood

Change via CDN link: INLINECODE23

For fully custom themes, use black as base and override with custom CSS.

Plugins (via CDN)

Enable code highlighting, speaker notes, math, search, zoom:

CODEBLOCK8

For code blocks with line highlighting:
CODEBLOCK9

Deployment

Vercel (static)

Just push the HTML + CSS + assets. No build step needed — Vercel serves static files.

GitHub Pages

Push to repo, enable Pages from Settings → deploy from main branch root or /docs.

PDF Export

Append ?print-pdf to URL, then browser Print → Save as PDF.

Full API Reference

Read references/revealjs-api.md for complete config options, fragment types, JS API methods, keyboard shortcuts, and plugin details.