reveal.js — The HTML Presentation Framework

Introduction

reveal.js is a framework for building presentations with web technologies. Slides are authored in HTML or Markdown and rendered in the browser with transitions, animations, and responsive scaling. It powers hundreds of thousands of presentations and is the engine behind slides.com.

What reveal.js Does

• Renders slide decks in any modern browser with keyboard and touch navigation
• Supports nested vertical slides for organizing content hierarchically
• Includes speaker notes view with timer, next-slide preview, and notes display
• Provides a plugin API for syntax highlighting, math typesetting, search, and more
• Exports presentations to PDF via the print stylesheet

Architecture Overview

reveal.js is a client-side JavaScript library that transforms a structured HTML document into a navigable slide deck. Slides are <section> elements inside a <div class="reveal"> container. The core handles layout, transitions, and state management, while an event-driven plugin system extends functionality. The build toolchain uses Rollup for bundling.

Self-Hosting & Configuration

• Clone the repo and run npm install && npm start for a development server
• Alternatively, load reveal.js from a CDN in a standalone HTML file
• Configure options like transition, autoSlide, hash, and controls in the Reveal.initialize() call
• Write slides in Markdown using the built-in markdown plugin with external .md files
• Deploy the dist folder to any static hosting provider

Key Features

• Markdown authoring support with external file loading and element attributes
• Auto-animate transitions between slides with matching elements
• Code syntax highlighting via highlight.js with line number and step-through support
• LaTeX math rendering through MathJax or KaTeX plugins
• Multiplexing allows one presenter to control slides on many viewer devices

Comparison with Similar Tools

• Slidev — Vue-powered, developer-focused with code-centric features; reveal.js is framework-agnostic
• Marp — converts Markdown to slides via CLI; reveal.js offers richer interactivity in the browser
• Impress.js — uses 3D CSS transforms for spatial presentations; reveal.js focuses on traditional slide flow
• Google Slides — cloud-hosted with collaboration; reveal.js is self-hosted and version-controllable
• Deck.js — older HTML slide library; reveal.js has more features and active development

FAQ

Q: Can I use reveal.js without Node.js? A: Yes. Include the CSS and JS files from a CDN in a single HTML file and author slides directly.

Q: How do I export slides to PDF? A: Append ?print-pdf to the URL, then use the browser's print dialog to save as PDF. Decktape is another option for higher fidelity.

Q: Does reveal.js support live collaboration? A: The multiplex plugin lets a presenter control navigation on remote viewers' browsers in real time.

Q: Can I embed iframes and videos in slides? A: Yes. Slides support any HTML content including iframes, videos, canvas elements, and custom web components.

Sources

• https://github.com/hakimel/reveal.js
• https://revealjs.com/