This page provides an overview of reveal.js's major capabilities and what makes it a powerful HTML presentation framework. For details on how to create presentations using these features, see Creating Presentations. For information on the underlying architecture that enables these features, see Core Architecture.
This document highlights the key features available in reveal.js, including nested slide navigation, fragment animations, auto-animation, view modes, PDF export, speaker notes, and the plugin system. Each feature is mapped to the code entities that implement it, enabling developers to understand how capabilities connect to the codebase structure.
Reveal.js implements features through a controller-based architecture where specialized controllers manage distinct capabilities. The following diagram shows how major features map to their implementing controllers and components.
Sources: js/reveal.js108-126
Reveal.js supports two-dimensional slide navigation: horizontal slides represent primary content flow, while vertical slides (nested within horizontal slides) provide additional detail or sub-topics. This creates a hierarchical presentation structure.
| Feature | Implementation | Code Reference |
|---|---|---|
| Horizontal slides | <section> elements as direct children of .slides | js/utils/constants.js defines HORIZONTAL_SLIDES_SELECTOR |
| Vertical slides | Nested <section> elements within a horizontal <section> | js/utils/constants.js defines VERTICAL_SLIDES_SELECTOR |
| Index tracking | indexh (horizontal), indexv (vertical) | js/reveal.js62-63 |
| Stack detection | isVerticalSlide(), isVerticalStack() | js/reveal.js1079-1096 |
| Previous index memory | setPreviousVerticalIndex(), getPreviousVerticalIndex() | js/reveal.js1043-1069 |
#/h/v (e.g., #/2/3 for horizontal 2, vertical 3)Sources: js/reveal.js1079-1096 demo.html49-71 js/utils/constants.js
Fragments enable step-by-step content reveals within a single slide. Elements with the .fragment class remain hidden until activated, allowing presenters to control information flow and maintain audience focus.
| Fragment Type | Class | Effect |
|---|---|---|
| Default | .fragment | Fade in |
| Grow | .fragment.grow | Scale up |
| Shrink | .fragment.shrink | Scale down |
| Fade out | .fragment.fade-out | Fade to transparent |
| Fade in then out | .fragment.fade-in-then-out | Appear then disappear |
| Highlight | .fragment.highlight-red (blue/green) | Color highlight |
| Strike | .fragment.strike | Strikethrough text |
| Custom order | data-fragment-index="2" | Control sequence |
The Fragments controller manages fragment states through these key methods:
fragments.goto(index): Navigate to specific fragment indexfragments.next(): Advance to next fragmentfragments.prev(): Return to previous fragmentfragments.update(): Refresh fragment visibility based on current stateFragment events dispatched:
fragmentshown: When fragment becomes visiblefragmenthidden: When fragment becomes hiddenSources: js/reveal.js115 js/controllers/fragments.js demo.html225-250
Auto-Animation automatically animates matching elements between consecutive slides using the FLIP (First, Last, Invert, Play) technique. Elements are matched by data-id attributes, enabling smooth transitions between slide states.
Auto-Animation matches elements between slides using this priority order:
data-id attribute: Explicit matching (highest priority)<img> elements with same src attribute<video> elements with same src attribute| Attribute | Purpose | Example |
|---|---|---|
data-auto-animate | Enable auto-animation for slide | <section data-auto-animate> |
data-id | Explicitly match elements | <div data-id="box1"> |
data-auto-animate-id | Group related animated slides | <section data-auto-animate-id="sequence1"> |
data-auto-animate-restart | Break animation chain | <section data-auto-animate-restart> |
data-auto-animate-easing | Custom easing function | data-auto-animate-easing="ease-in-out" |
data-auto-animate-duration | Animation duration (seconds) | data-auto-animate-duration="0.5" |
data-auto-animate-delay | Element-specific delay | data-auto-animate-delay="0.2" |
The AutoAnimate controller implements the FLIP technique:
Sources: js/reveal.js111 js/controllers/autoanimate.js demo.html87-173 js/reveal.js1468-1474
Reveal.js supports four distinct view modes, each fundamentally changing how the presentation is rendered and navigated. View modes are managed by dedicated controllers.
| Mode | Controller | Activation | Primary Use Case |
|---|---|---|---|
| Normal | N/A (default) | Default state | Standard presentation delivery |
| Overview | Overview (line 116) | Press ESC or 'O' | Navigate slide structure |
| Scroll | ScrollView (line 113) | config.view = 'scroll' | Continuous reading experience |
PrintView (line 114) | config.view = 'print' | PDF export and printing |
Reveal.toggleOverview() or press ESCview: 'scroll' in config or call scrollView.activate()view: 'print' in config or use ?print-pdf query parameterScroll view can automatically activate based on viewport width:
When presentation width falls below this threshold, scroll view activates automatically.
Sources: js/reveal.js113-116 js/reveal.js256-288 js/reveal.js959-987
Speaker notes provide a separate view for presenters, displaying current slide, upcoming slide, elapsed time, and presenter notes. Communication between presentation and speaker view windows occurs via postMessage API.
Speaker notes are defined using <aside class="notes"> elements:
| Feature | Description |
|---|---|
| Current slide | Large preview of active slide |
| Next slide | Smaller preview of upcoming slide |
| Timer | Elapsed time since presentation started |
| Pacing | Time indicators (green/yellow/red based on data-timing attributes) |
| Notes display | Formatted presenter notes with scroll |
| Layout persistence | Clock and notes positions remembered |
Individual slides can specify expected duration:
The speaker view uses these timings to show pacing indicators.
Sources: js/reveal.js126 js/controllers/notes.js demo.html415-417 plugin/notes/notes.js plugin/notes/notes.html
PDF export is implemented through the Print View mode, which renders all slides in a static layout optimized for printing and PDF generation. This mode expands all fragments, applies page breaks, and includes speaker notes.
When print view activates (js/reveal.js273-281):
printView.activate()The PrintView controller automatically calculates optimal page breaks by:
For backward compatibility, the ?print-pdf query parameter is supported:
Sources: js/reveal.js114 js/reveal.js154-157 js/reveal.js273-281 js/controllers/printview.js demo.html421-424
The plugin system provides a standardized extension mechanism. Plugins are managed by the Plugins controller, which handles loading, registration, and initialization.
Every plugin must implement:
| Property/Method | Type | Required | Purpose |
|---|---|---|---|
id | string | Yes | Unique identifier (e.g., "markdown", "highlight") |
init(reveal) | function | Yes | Initialization function receiving Reveal instance |
Example plugin structure:
| Plugin | ID | Purpose | File |
|---|---|---|---|
| Markdown | 'markdown' | Parse Markdown content, slidify | plugin/markdown/markdown.js |
| Highlight | 'highlight' | Syntax highlighting with highlight.js | plugin/highlight/highlight.js |
| Notes | 'notes' | Speaker notes and presenter view | plugin/notes/notes.js |
| Math | 'math' | LaTeX math rendering (MathJax/KaTeX) | plugin/math/math.js |
| Search | 'search' | Full-text search (Ctrl+Shift+F) | plugin/search/search.js |
| Zoom | 'zoom' | Alt+click to zoom elements | plugin/zoom/zoom.js |
Plugins are registered during initialization (js/reveal.js165):
The Plugins controller:
init() method on each pluginReveal.getPlugins()Plugins receive the Reveal instance in their init() method, providing access to:
reveal.getConfig()reveal.on(), reveal.off()reveal.slide(), reveal.next(), reveal.prev()reveal.getIndices(), reveal.getCurrentSlide()reveal.getRevealElement(), reveal.getSlidesElement()Sources: js/reveal.js122 js/controllers/plugins.js index.html26-37 demo.html478-495
Reveal.js presentations automatically adapt to different screen sizes and devices through responsive scaling, touch support, and conditional view mode activation.
The layout system (js/reveal.js806-919) performs these steps:
min(viewportWidth/slideWidth, viewportHeight/slideHeight)minScale and maxScale config optionsscale() transform to fit slidesleft: 50%; top: 50%; transform: translate(-50%, -50%)When Device.isMobile is true (js/reveal.js329-334):
.no-hover class to prevent hover state issues--vh property for accurate viewport heightScroll view can automatically activate on narrow viewports (js/reveal.js959-987):
When viewport width falls below threshold:
checkResponsiveScrollView() detects width changescrollView.activate() is calledThe Touch controller (js/reveal.js125) provides:
Sources: js/reveal.js806-919 js/reveal.js959-987 js/reveal.js125 js/controllers/touch.js js/utils/device.js
The Markdown plugin enables content authoring using Markdown syntax. Content can be written inline or loaded from external files. The plugin uses the marked.js library for parsing.
The Markdown plugin splits content into slides using configurable separators:
| Separator | Default Pattern | Creates |
|---|---|---|
| Horizontal | \r?\n---\r?\n | New horizontal slide |
| Vertical | \r?\n--\r?\n | Nested vertical slide |
| Notes | ^Notes?: | Speaker notes section |
Example Markdown with separators:
Markdown slides support inline attribute specification using special comment syntax:
.slide: applies attributes to the <section> element.element: applies attributes to the next HTML elementSources: plugin/markdown/markdown.js demo.html182-198 index.html27
Reveal.js includes a comprehensive theming system built on Sass, providing multiple built-in themes and support for custom theme development.
| Theme | File | Visual Characteristics |
|---|---|---|
| Black | dist/theme/black.css | Dark background, light text (default) |
| White | dist/theme/white.css | Light background, dark text |
| League | dist/theme/league.css | Gray background, thick headers |
| Sky | dist/theme/sky.css | Blue gradient background |
| Beige | dist/theme/beige.css | Beige colors, brown text |
| Simple | dist/theme/simple.css | Minimalist design |
| Serif | dist/theme/serif.css | Serif fonts, classic style |
| Blood | dist/theme/blood.css | Dark with red accents |
| Night | dist/theme/night.css | Black background, orange links |
| Moon | dist/theme/moon.css | Dark blue background |
| Solarized | dist/theme/solarized.css | Solarized color scheme |
Themes are loaded via stylesheet link in HTML:
Theme can be changed dynamically by updating the href attribute.
Reveal.js provides multiple slide transition types:
| Transition | Effect |
|---|---|
none | Instant cut |
fade | Cross-fade |
slide | Horizontal slide (default) |
convex | Convex 3D rotation |
concave | Concave 3D rotation |
zoom | Scale and fade |
Transitions can be configured globally or per-slide:
The theme system exposes CSS custom properties for runtime customization:
--slide-width: Configured slide width--slide-height: Configured slide height--slide-scale: Current scale factor--viewport-width: Viewport width in pixels--viewport-height: Viewport height in pixelsThese are set dynamically by the layout system (js/reveal.js530-531 js/reveal.js904-906).
Sources: index.html9-14 demo.html17-22 demo.html266-283 js/reveal.js522-527 css/reveal.scss
| Feature | Primary Controller/Component | Key Methods/Properties | Configuration |
|---|---|---|---|
| Nested Slides | Navigation system | indexh, indexv, slide() | HORIZONTAL_SLIDES_SELECTOR, VERTICAL_SLIDES_SELECTOR |
| Fragments | Fragments (line 115) | next(), prev(), goto() | .fragment class, data-fragment-index |
| Auto-Animation | AutoAnimate (line 111) | run(), shouldAutoAnimateBetween() | data-auto-animate, data-id |
| Speaker Notes | Notes (line 126) | update(), postMessage communication | <aside class="notes">, data-timing |
| PDF Export | PrintView (line 114) | activate(), page break calculation | view: 'print', ?print-pdf |
| Overview Mode | Overview (line 116) | activate(), deactivate(), toggle() | Press ESC or 'O' |
| Scroll View | ScrollView (line 113) | activate(), deactivate(), layout() | view: 'scroll', scrollActivationWidth |
| Plugins | Plugins (line 122) | load(), registerPlugin() | plugins: [] array, plugin.init() |
| Markdown | Markdown Plugin | slidify(), marked.js integration | data-markdown, separator patterns |
| Touch/Mobile | Touch (line 125) | bind(), gesture detection | config.touch, Device.isMobile |
| Keyboard | Keyboard (line 117) | bind(), key mapping | config.keyboard, custom bindings |
| Backgrounds | Backgrounds (line 112) | update(), updateParallax() | data-background-* attributes |
Sources: js/reveal.js108-126 README.md12
Refresh this wiki