reveal.js

library6.0.1jsnpmunverified

reveal.js is an open-source framework for creating interactive, browser-based presentations using HTML, CSS, and JavaScript. The current stable version is 6.0.1, with frequent minor and patch releases addressing bugs and introducing new features, and major versions typically bringing significant architectural or feature additions (e.g., v5.0 introduced scroll view, v6.0 introduced an official React wrapper). Key differentiators include its extensibility via a rich API and plugins, support for nested slides, Markdown, Auto-Animate, PDF export, speaker notes, LaTeX typesetting, and syntax-highlighted code. It stands out by allowing presentations to be consumed as traditional slides or as a scrollable web page, providing flexibility for different viewing contexts. The recent introduction of an official React wrapper (`@revealjs/react`) offers a component-based approach for building decks, appealing to modern web development workflows.

web-framework

npm install reveal.js

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REVEAL.JS

reveal.js

web-frameworkjavascriptv6.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Reveal

✓ import Reveal from 'reveal.js'

✗ const Reveal = require('reveal.js')

reveal.js is primarily designed for ESM usage in modern projects. While CommonJS might work with bundlers, direct `require` is not the idiomatic approach for current versions.

Reveal.initialize

✓ import Reveal from 'reveal.js'; Reveal.initialize({...});

The `initialize` method is part of the default `Reveal` export, not a separate named export. It must be called on the imported `Reveal` object.

RevealMarkdown

✓ import RevealMarkdown from 'reveal.js/plugin/markdown/markdown.esm.js'

✗ import { Markdown } from 'reveal.js'

Plugins are typically imported from their specific paths within the `plugin` directory and often have an `.esm.js` suffix for ESM compatibility. The specific import path may vary slightly for other plugins like Math, Highlight, or Notes.

This quickstart initializes a basic reveal.js presentation with two slides, demonstrating HTML and Markdown content, and integrating the Markdown and Highlight plugins. It shows how to set up the HTML structure and configure Reveal.js programmatically using ESM imports.

import Reveal from 'reveal.js'; import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js'; import Highlight from 'reveal.js/plugin/highlight/highlight.esm.js'; document.addEventListener('DOMContentLoaded', () => { // Create a basic presentation structure document.body.innerHTML = ` <div class="reveal"> <div class="slides"> <section> <h1>Hello reveal.js!</h1> <p>This is your first slide.</p> </section> <section data-markdown> <textarea data-template> ## Markdown Slide * Item 1 * Item 2 ```javascript console.log('Hello from code block'); ``` </textarea> </section> <section> <h2>Features</h2> <ul> <li>HTML & Markdown support</li> <li>Plugins for Math, Code Highlight, Notes</li> <li>Speaker View</li> </ul> </section> </div> </div> `; let deck = new Reveal({ plugins: [Markdown, Highlight], controls: true, progress: true, hash: true, center: true, transition: 'slide', // Optional: Enables scroll view for presentations. // Note: Scroll view is new in v5.0.0 and above. // scrollMode: 'paged' }); deck.initialize(); console.log('reveal.js initialized!'); });

Debug

Known issues

breakingVersion 6.0.0 introduced `@revealjs/react`, an official React wrapper. While it's a new feature, direct integration with React applications should now consider using this new package instead of custom component wrappers, as the wrapper provides idiomatic React components.

fix

For new React projects, consider using `@revealjs/react` for a more streamlined and idiomatic integration. For existing projects, ensure your custom React wrappers are compatible with the core library's API changes.

affects: >=6.0.0

breakingVersion 5.0.0 introduced 'scroll view' as a groundbreaking new feature, changing how presentations can be consumed. While it's optional, it represents a significant shift in presentation paradigms. Existing presentations might behave differently or require adjustments if enabling `scrollMode`.

fix

Review your presentation's layout and content for optimal display in scroll view if you plan to enable `scrollMode`. Test thoroughly, especially with images, videos, and complex layouts.

affects: >=5.0.0

gotchaSeveral security fixes related to XSS vulnerabilities have been implemented across versions (e.g., postMessage API, slide background). While patched in recent releases, older versions may be vulnerable.

fix

Always keep reveal.js updated to the latest stable version to benefit from security patches. Review any custom content injected into slides or through the API to ensure it's properly sanitized.

affects: >=5.0.3

gotchaPlugin imports often require specific paths (e.g., `reveal.js/plugin/markdown/markdown.esm.js`). Incorrect paths or attempting to import plugins directly from the main `reveal.js` package can lead to import errors or plugins not loading.

fix

Refer to the official documentation for the correct import paths for each plugin. Ensure you are using the `.esm.js` variant for ES Modules in modern build setups.

affects: >=3.0.0

gotchaPDF export functionality can sometimes have issues with speaker notes, background images, or complex layouts not rendering as expected. This often requires specific configuration adjustments or an updated browser environment.

fix

Consult the PDF export documentation (`revealjs.com/pdf-export/`) for best practices. Ensure your browser is up-to-date and consider adjusting `print` related CSS or `Reveal.config` options for better output.

affects: >=5.0.0

Errors

Common errors & fixes

Uncaught TypeError: Cannot read properties of undefined (reading 'initialize')

The `Reveal` object was not correctly imported or is not available in the scope when `initialize()` is called.

fix

Ensure `import Reveal from 'reveal.js';` is at the top of your module and that `new Reveal({...}).initialize()` is called after the DOM is ready.

Failed to load module script: The server responded with a non-zero status code 404 for a module script with source '.../plugin/markdown/markdown.js'.

Incorrect file path for a plugin import, or the plugin file does not exist at the specified location.

fix

Verify the exact path for the plugin import. Most modern setups require `.esm.js` suffix, e.g., `import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';`.

ReferenceError: require is not defined

Attempting to use `require()` for CommonJS imports in an ES Module context (e.g., in a browser with `type="module"` or a modern Node.js project).

fix

Switch to ES Module imports: `import Reveal from 'reveal.js';` instead of `const Reveal = require('reveal.js');`.

Slides are not full screen or are displaying with incorrect aspect ratio/margins.

Incorrect CSS styling or missing `reveal.js` CSS themes, or the presentation container is not properly sized.

fix

Ensure `reveal.js` base and theme CSS files are linked correctly (`<link rel="stylesheet" href="dist/reveal.css">` and `<link rel="stylesheet" href="dist/theme/black.css">`). Verify your HTML structure matches the `div.reveal > div.slides` expected by the framework.

Upgrade

Version history

6.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/hakimel/reveal.js ↗

packagehttps://www.npmjs.com/package/reveal.js ↗

homepagehttps://revealjs.com ↗