` elements to create vertical slide stacks: ```html

Vertical Slide 1 (top)

Vertical Slide 2

Vertical Slide 3

``` Navigate down through vertical slides, then right to the next horizontal group. ### 4.2 Themes reveal.js ships with 14 themes: | Theme | Description | |---|---| | `beige` | Warm beige with serif headings | | `black` | Black background, white text (default) | | `black-contrast` | High-contrast black variant | | `blood` | Dark with red accents | | `dracula` | Popular dark color scheme | | `league` | Gray textured background | | `moon` | Dark blue background | | `night` | Black with thick heading fonts | | `serif` | Cappuccino tones with serif fonts | | `simple` | Clean white background | | `sky` | Light blue gradient | | `solarized` | Solarized color palette | | `white` | White background, dark text | | `white-contrast` | High-contrast white variant | Switch themes by changing the theme stylesheet: ```html ``` Or when installed via npm: ```javascript import 'reveal.js/dist/theme/dracula.css'; ``` ### 4.3 Slide Backgrounds #### Color Backgrounds ```html

Solid color

Gradient

``` #### Image Backgrounds ```html

Image background

``` #### Video Backgrounds ```html

Video background

``` #### Iframe Backgrounds ```html

Interactive iframe background

``` Use `data-preload` on iframe backgrounds to load them before the slide is reached. The `data-background-interactive` attribute allows clicking and scrolling within the iframe. All background data attributes: | Attribute | Purpose | |---|---| | `data-background` | Shorthand for color or image | | `data-background-color` | CSS color value | | `data-background-gradient` | CSS gradient value | | `data-background-image` | Image URL | | `data-background-size` | CSS background-size | | `data-background-position` | CSS background-position | | `data-background-repeat` | CSS background-repeat | | `data-background-opacity` | Opacity (0-1) | | `data-background-video` | Video URL | | `data-background-video-loop` | Loop the video | | `data-background-video-muted` | Mute the video | | `data-background-iframe` | Iframe URL | | `data-background-interactive` | Enable iframe interaction | | `data-background-transition` | Per-slide background transition | | `data-preload` | Pre-load this background | ### 4.4 Fragments (Step-by-Step Reveals) Wrap elements in the `fragment` class to reveal them incrementally: ```html

Appears first

Appears second

Appears third

``` #### Fragment Animations | Class | Effect | |---|---| | `fade-out` | Fade out on step | | `fade-up` | Slide up while fading in | | `fade-down` | Slide down while fading in | | `fade-left` | Slide left while fading in | | `fade-right` | Slide right while fading in | | `fade-in-then-out` | Fade in, then fade out on next step | | `fade-in-then-semi-out` | Fade in, then dim on next step | | `grow` | Scale up | | `shrink` | Scale down | | `strike` | Strikethrough text | | `highlight-red` | Turn text red | | `highlight-blue` | Turn text blue | | `highlight-green` | Turn text green | | `highlight-current-red` | Red on current step, revert on next | | `highlight-current-blue` | Blue on current step, revert on next | | `highlight-current-green` | Green on current step, revert on next | ```html

Slides up

Turns red

Appears then disappears

``` #### Custom Fragment Order Use `data-fragment-index` to control the order: ```html

Third

First

Second

``` > [!WARNING] > Fragment animations `fade-out` and `fade-in-then-out` may produce blank slides under certain conditions (GitHub issue #3884). Test these animations with your specific content before presenting. ### 4.5 Speaker Notes Add notes visible only in the speaker view: ```html

My Slide

``` Or use the `data-notes` attribute for plain text: ```html

My Slide

``` Open speaker view by pressing **S** or appending `?notes` to the URL. ### 4.6 Keyboard Shortcuts | Key | Action | |---|---| | Arrow keys | Navigate between slides | | Space | Next slide/fragment | | Shift + Space | Previous slide/fragment | | S | Open speaker notes window | | O or Esc | Toggle overview mode | | F | Toggle fullscreen | | B or . | Pause/blackout | | ? | Toggle help overlay | | Ctrl + Shift + F | Open search (requires Search plugin) | | Alt + click | Zoom into element (requires Zoom plugin; Ctrl + click on Linux) | ### 4.7 Slide Visibility Control whether slides appear in the deck: ```html

This slide won't appear

Bonus slide (unnumbered)

``` ### 4.8 Auto-Animate Create smooth transitions between consecutive slides by adding `data-auto-animate`: ```html

Step 1

New content appears

``` reveal.js automatically animates matching elements between slides. It matches elements by: 1. Explicit `data-id` attribute (strongest match) 2. Tag name + text content (for text, images, videos, code blocks) #### Matching with data-id ```html

``` #### Controlling Animation Behavior Global configuration: | Option | Default | Description | |---|---|---| | `autoAnimate` | `true` | Enable auto-animate globally | | `autoAnimateEasing` | `'ease'` | CSS easing function | | `autoAnimateDuration` | `1.0` | Animation duration in seconds | | `autoAnimateUnmatched` | `true` | Animate unmatched elements (fade in) | | `autoAnimateMatcher` | `null` | Custom matching function | Animatable CSS properties (default): `opacity`, `color`, `background-color`, `padding`, `font-size`, `line-height`, `letter-spacing`, `border-width`, `border-color`, `border-radius`, `outline`, `outline-offset` Per-element overrides: ```html

``` #### Grouping and Breaking Chains Use `data-auto-animate-id` to group non-adjacent auto-animate slides: ```html

Step A1

Step B1

Step A2

``` Use `data-auto-animate-restart` to break an animation chain: ```html

Step 1

Step 2 (animates from Step 1)

Step 3 (fresh start)

``` ### 4.9 Links and Slide References Link to specific slides within your presentation: ```html Go to slide 3 (zero-indexed) Go to slide 3, vertical slide 2 ``` With `hash: true`, you can also use slide IDs: ```html

Conclusion

Jump to conclusion ``` ### 4.10 Media: Images, Video, Audio #### Lazy-Loading Media Use `data-src` instead of `src` to lazy-load: ```html

``` #### Embedded Video ```html

``` With `autoPlayMedia: null` (the default), videos only auto-play if they have the `data-autoplay` attribute. --- ## 5. Common Tasks ### 5.1 Writing Slides in Markdown Load the Markdown plugin: ```javascript import Reveal from 'reveal.js'; import RevealMarkdown from 'reveal.js/plugin/markdown'; Reveal.initialize({ plugins: [ RevealMarkdown ] }); ``` #### Inline Markdown ```html

``` The default horizontal separator is `---`. Configure custom separators: ```html

``` #### External Markdown Files ```html

``` #### Markdown Plugin Configuration ```javascript Reveal.initialize({ markdown: { separator: '^\r?\n---\r?\n$', verticalSeparator: '^\r?\n--\r?\n$', notesSeparator: 'notes:', animateLists: false, smartypants: false, gfm: true, breaks: false }, plugins: [ RevealMarkdown ] }); ``` #### Element Attributes in Markdown Apply HTML attributes to Markdown elements: ```markdown ## Title - Item 1 - Item 2 ``` Apply attributes to the slide itself: ```markdown ## Red Background Slide ``` ### 5.2 Syntax-Highlighted Code Load the Highlight plugin: ```javascript import Reveal from 'reveal.js'; import RevealHighlight from 'reveal.js/plugin/highlight'; Reveal.initialize({ plugins: [ RevealHighlight ] }); ``` Include a highlight.js theme: ```html ``` #### Basic Code Block ```html


def greet(name):
    return f"Hello, {name}!"

print(greet("World"))

``` - `data-trim` -- removes leading/trailing whitespace - `data-noescape` -- prevents HTML entity escaping #### Line Numbers ```html


const x = 1;
const y = 2;
const z = x + y;
console.log(z);

``` Highlight specific lines: ```html


const x = 1;
const y = 2;
const z = x + y;

``` #### Step-Through Highlighting Animate through different highlighted lines as fragments: ```html


const width = 960;
const height = 700;
const area = width * height;
const perimeter = 2 * (width + height);

console.log(`Area: ${area}, Perimeter: ${perimeter}`);

``` Each pipe-separated group becomes a fragment step: first line 1 highlights, then lines 3-4, then line 6. #### Highlight Plugin Configuration | Option | Default | Description | |---|---|---| | `highlightOnLoad` | `true` | Auto-highlight all code blocks | | `escapeHTML` | `true` | Escape HTML in code blocks | | `beforeHighlight` | `null` | Callback before highlighting | ```javascript Reveal.initialize({ highlight: { highlightOnLoad: true, escapeHTML: true }, plugins: [ RevealHighlight ] }); ``` ### 5.3 Rendering Math Equations Load one of the Math sub-plugins: ```javascript import Reveal from 'reveal.js'; import RevealMath from 'reveal.js/plugin/math'; Reveal.initialize({ plugins: [ RevealMath.KaTeX ] // or: RevealMath.MathJax2, RevealMath.MathJax3, RevealMath.MathJax4 }); ``` #### KaTeX (Fastest) ```javascript Reveal.initialize({ katex: { version: 'latest', delimiters: [ { left: '$$', right: '$$', display: true }, { left: '$', right: '$', display: false }, { left: '\$', right: '\$', display: false }, { left: '\\[', right: '\\]', display: true } ], ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre'] }, plugins: [ RevealMath.KaTeX ] }); ``` #### MathJax 2 ```javascript Reveal.initialize({ mathjax2: { mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js', config: 'TeX-AMS_HTML-full', tex2jax: { inlineMath: [['$', '$'], ['\$', '\$']], skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'] } }, plugins: [ RevealMath.MathJax2 ] }); ``` #### Using Math in Slides ```html

Euler's Identity

$$e^{i\pi} + 1 = 0$$

Inline math: $a^2 + b^2 = c^2$

``` ### 5.4 Using Speaker Notes Load the Notes plugin: ```javascript import Reveal from 'reveal.js'; import RevealNotes from 'reveal.js/plugin/notes'; Reveal.initialize({ plugins: [ RevealNotes ] }); ``` The speaker view opens in a separate window showing: - Current slide - Next slide preview - Speaker notes - Elapsed time and timer Open with **S** key or `?notes` query parameter. ### 5.5 Searching Within Slides Load the Search plugin: ```javascript import Reveal from 'reveal.js'; import RevealSearch from 'reveal.js/plugin/search'; Reveal.initialize({ plugins: [ RevealSearch ] }); ``` Open search with **Ctrl + Shift + F**. The plugin provides programmatic access via `open()`, `close()`, and `toggle()` methods. ### 5.6 Zooming Into Elements Load the Zoom plugin: ```javascript import Reveal from 'reveal.js'; import RevealZoom from 'reveal.js/plugin/zoom'; Reveal.initialize({ plugins: [ RevealZoom ] }); ``` **Alt + click** (or **Ctrl + click** on Linux) on any element to zoom in. Click again to zoom out. Configuration: | Option | Default | Description | |---|---|---| | `zoomKey` | `'alt'` | Modifier key for zoom (`'alt'` or `'ctrl'`) | | `zoomLevel` | `2` | Zoom magnification factor | ### 5.7 Exporting to PDF Add `?print-pdf` to the presentation URL: ``` http://localhost:8000/?print-pdf ``` Then use the browser's print dialog (Ctrl + P / Cmd + P): 1. Set destination to "Save as PDF" 2. Set layout to "Landscape" 3. Set margins to "None" 4. Enable "Background graphics" > [!TIP] > Set `pdfSeparateFragments: false` to collapse all fragment steps into single slides for more compact PDFs. If your PDFs are very large, reduce the number of high-resolution background images. #### PDF Configuration ```javascript Reveal.initialize({ pdfMaxPagesPerSlide: 1, // Limit pages per slide pdfSeparateFragments: true, // Each fragment = separate page pdfPageHeightOffset: -1 // Fine-tune page height }); ``` ### 5.8 Scroll View Enable scroll view for a document-like reading experience: ```javascript Reveal.initialize({ view: 'scroll', scrollLayout: 'full', scrollSnap: 'mandatory', scrollProgress: 'auto' }); ``` On viewports narrower than `scrollActivationWidth` (default: 435px), scroll view activates automatically. ### 5.9 Embedding a Presentation Embed reveal.js in a page alongside other content: ```html

Embedded slide

``` With `embedded: true`, the presentation only captures keyboard events when focused. Multiple independent presentations can coexist on one page. ### 5.10 Using the PostMessage API Control a presentation embedded in an iframe: ```javascript // From the parent page const iframe = document.querySelector('iframe'); // Navigate to slide 2 iframe.contentWindow.postMessage( JSON.stringify({ method: 'slide', args: [2] }), '*' ); // Listen for events window.addEventListener('message', event => { const data = JSON.parse(event.data); if (data.namespace === 'reveal') { console.log('Slide changed:', data.eventName); } }); ``` Enable event broadcasting: ```javascript Reveal.initialize({ postMessage: true, postMessageEvents: true }); ``` ### 5.11 Multiple Presentations on One Page Create independent deck instances by passing a DOM element: ```javascript let deck1 = new Reveal(document.querySelector('#deck1'), { embedded: true }); deck1.initialize(); let deck2 = new Reveal(document.querySelector('#deck2'), { embedded: true }); deck2.initialize(); ``` ### 5.12 Loading All Plugins Together A typical full-featured setup: ```javascript import Reveal from 'reveal.js'; import RevealHighlight from 'reveal.js/plugin/highlight'; import RevealMarkdown from 'reveal.js/plugin/markdown'; import RevealMath from 'reveal.js/plugin/math'; import RevealNotes from 'reveal.js/plugin/notes'; import RevealSearch from 'reveal.js/plugin/search'; import RevealZoom from 'reveal.js/plugin/zoom'; Reveal.initialize({ hash: true, plugins: [ RevealHighlight, RevealMarkdown, RevealMath.KaTeX, RevealNotes, RevealSearch, RevealZoom ] }); ``` ### 5.13 React Component Recipes #### Basic React Deck ```jsx import { Deck, Slide, Fragment, Code } from '@revealjs/react'; function MyPresentation() { return (

Welcome

This fades in

Code Example


          {`const x = 1;
const y = 2;
const sum = x + y;
console.log(sum);`}

); } ``` #### Accessing the Reveal Instance ```jsx import { useReveal } from '@revealjs/react'; function SlideControls() { const reveal = useReveal(); return ( ); } ``` #### Vertical Slide Stacks ```jsx import { Deck, Slide, Stack } from '@revealjs/react'; function Presentation() { return ( Horizontal 1 Vertical 1.1 Vertical 1.2 Horizontal 2 ); } ``` ### 5.14 Custom Keyboard Bindings Add custom key handlers: ```javascript Reveal.initialize({ keyboard: { // Pause on 'P' key (key code 80) 80: () => { Reveal.togglePause(); }, // Go to first slide on 'Home' 36: () => { Reveal.slide(0); } } }); ``` ### 5.15 Event Listeners React to presentation events: ```javascript Reveal.on('slidechanged', event => { console.log(`Moved to slide ${event.indexh}, ${event.indexv}`); }); Reveal.on('fragmentshown', event => { console.log('Fragment shown:', event.fragment); }); Reveal.on('overviewshown', () => { console.log('Overview mode activated'); }); Reveal.on('paused', () => { console.log('Presentation paused'); }); ``` --- ## 6. Troubleshooting ### Error: `Unable to find presentation root` **Cause:** reveal.js cannot locate the `.reveal` container element in the DOM. **Solution:** Ensure your HTML contains the required structure. The `div.reveal > div.slides` hierarchy must exist before `Reveal.initialize()` is called: ```html

At least one slide

``` If initializing dynamically, make sure the DOM is ready (use `DOMContentLoaded` or place the script after the markup). **Prevention:** Always verify the container structure exists before initializing. When using frameworks like React, use the `@revealjs/react` wrapper which handles this automatically. ### Error: `Please specify a valid media type to preview` **Cause:** The `previewLinks` feature was activated but could not determine the content type of the linked resource. **Solution:** Ensure the linked URL returns proper content-type headers, or disable link previews for problematic links by adding `data-preview-link="false"` to the anchor element. **Prevention:** Only enable `previewLinks: true` when your linked resources are reliably accessible and serve correct headers. ### Problem: npm install fails **Cause:** Node.js version mismatch or network issues. reveal.js v6.0.1 requires Node.js 20.19.0+ (GitHub issue #3821). **Solution:** ```bash node --version # Must be >= 20.19.0 nvm install 20 nvm use 20 npm install ``` **Prevention:** Use a `.nvmrc` file or check the `engines` field in `package.json` before installing. ### Problem: PDF export generates very large files **Cause:** High-resolution background images and per-fragment page generation inflate file size (GitHub issue #3860). **Solution:** 1. Optimize background images before using them 2. Reduce fragment separation: ```javascript Reveal.initialize({ pdfSeparateFragments: false }); ``` 3. Limit pages per slide: ```javascript Reveal.initialize({ pdfMaxPagesPerSlide: 1 }); ``` **Prevention:** Use compressed images and consider whether every fragment step needs its own PDF page. ### Problem: PDF export fails with Decktape **Cause:** Compatibility issues between Decktape and reveal.js v6 (GitHub issue #3888). **Solution:** Use the built-in `?print-pdf` approach with browser print instead of Decktape. If Decktape is required, check the issue thread for updated compatibility patches. **Prevention:** Test PDF export workflow before committing to Decktape for production use. ### Problem: Dracula theme background color changed in v6 **Cause:** The Dracula theme SCSS was updated in v6.0.1 (GitHub issue #3895). **Solution:** Override the background color in your custom CSS: ```css .reveal { background-color: #282a36; /* Original Dracula background */ } ``` **Prevention:** Pin theme variables explicitly if your design depends on specific colors. ### Problem: Content with multiple spaces is corrupted **Cause:** Whitespace normalization strips intentional multiple spaces in text content (GitHub issue #3839). **Solution:** Use ` ` entities for intentional multiple spaces, or wrap content in `

` tags to preserve whitespace.

**Prevention:** Avoid relying on multiple consecutive spaces in HTML content; use CSS for spacing instead.

### Problem: v6 not available on CDN

**Cause:** The v6 release has not been published to CDN providers yet (GitHub issue #3894).

**Solution:** Install via npm or serve the `dist/` files from your own server after building from source.

**Prevention:** Use npm for production deployments rather than relying on CDN availability for new major versions.

> [!CAUTION]
> If you encounter TypeScript errors related to keyboard configuration types, this is a known typing issue (GitHub issue #3749). Cast the config values as needed or use `// @ts-ignore` as a temporary workaround.

### Problem: Background styling leaks outside reveal.js

**Cause:** The `.background` CSS class is not scoped exclusively to reveal.js (GitHub issue #3869).

**Solution:** Ensure your page's CSS does not use a generic `.background` class, or scope reveal.js within a shadow DOM or iframe.

**Prevention:** Use namespaced CSS classes in your surrounding page to avoid collisions.

### Problem: Vertical background offset calculated incorrectly

**Cause:** Background positioning miscalculation for vertical slides (GitHub issue #3878).

**Solution:** Set explicit background positioning via `data-background-position` on affected vertical slides.

**Prevention:** Test vertical slide backgrounds across different viewport sizes.

---

## 7. FAQ

**Q: What browsers does reveal.js support?**
reveal.js works in all modern evergreen browsers (Chrome, Firefox, Safari, Edge). It uses standard Web APIs and ES modules.

**Q: Can I use reveal.js without npm or Node.js?**
Yes. Download the built files from the GitHub releases page and include `dist/reveal.esm.js` and `dist/reveal.css` directly in your HTML. Node.js is only needed for development (running the dev server, building from source, running tests).

**Q: How do I use multiple plugins together?**
Pass them all in the `plugins` array during initialization. Each plugin registers itself by its ID (e.g., `'highlight'`, `'markdown'`, `'notes'`). See recipe 5.12 for a complete example.

**Q: Can I run multiple presentations on one page?**
Yes. Create separate `new Reveal(element)` instances with `embedded: true`. Each deck operates independently. See recipe 5.11.

**Q: How do I navigate to a specific slide via URL?**
Enable `hash: true` in your config. Slides are addressable as `#/0` (first slide), `#/1/2` (second horizontal, third vertical). Named slides with `id` attributes work as `#/slide-id`.

**Q: How do I customize a theme?**
Create a custom SCSS file that imports the theme template and overrides variables. The theme source files are in `css/theme/source/`. Build with `npm run build` to compile. Alternatively, override styles in a regular CSS file loaded after the theme.

**Q: What is the difference between `view: 'scroll'` and normal mode?**
Scroll view transforms the presentation into a vertically scrollable document, similar to a web page. Normal mode shows one slide at a time with transitions. Scroll view activates automatically on narrow viewports (below `scrollActivationWidth: 435` pixels).

**Q: Can I use reveal.js with React?**
Yes. Install `@revealjs/react` (v0.2.1) which provides `Deck`, `Slide`, `Stack`, `Markdown`, `Fragment`, and `Code` components, plus a `useReveal()` hook. Requires React 18+ and reveal.js 5+.

**Q: How do I add my own JavaScript logic to slides?**
Listen to reveal.js events (see recipe 5.15) or write a custom plugin. The `Reveal.on()` method lets you react to `slidechanged`, `fragmentshown`, `fragmenthidden`, `overviewshown`, `paused`, `resumed`, and other lifecycle events.

**Q: How do I disable specific keyboard shortcuts?**
Pass a keyboard config object that maps key codes to `null`:

```javascript
Reveal.initialize({
keyboard: {
27: null // Disable Escape key (overview toggle)
}
});
```

> [!NOTE]
> For configuration internals, plugin architecture, build system details, and deployment strategies, see the **Admin Guide** at [hakimel/reveal.js](/hakimel/reveal.js/admin-guide/).

---

_Generated May 2026 from hakimel/reveal.js at 76dc900. AI-generated documentation. The library is checked by sampling (three repositories so far); this guide was not individually reviewed. Verify against the project before relying on it. Unofficial; not affiliated with or reviewed by the project._

Hello World

This slide zooms in

Fade in, slide out

Solid color

Gradient

Image background

Video background

Interactive iframe background

My Slide

My Slide

This slide won't appear

Bonus slide (unnumbered)

Step 1

Step 1

Conclusion

Euler's Identity

Welcome

Code Example