reveal.js HTML Presentation Framework

To create a presentation, render a Deck component containing one or more Slide components. You must import the core Reveal CSS and a theme (e.g., black.css) for the deck to render correctly.

import { Deck, Slide } from '@revealjs/react';
import 'reveal.js/reveal.css';
import 'reveal.js/theme/black.css';

export function Presentation() {
  return (
    <Deck>
      <Slide>
        <h1>Hello</h1>
        <p>My first Reveal deck in React.</p>
      </Slide>

      <Slide background="#111827">
        <h2>Second slide</h2>
      </Slide>
    </Deck>
  );
}

To create a new theme, duplicate an existing .scss file located in css/theme. The theme will be automatically compiled from Sass to CSS when you execute the build command.

Each theme follows a specific four-step structure based on template files:

1. Include mixins.scss: Provides shared utility functions.
2. Include settings.scss: Defines the custom CSS variables used by the template. You should override these variables to customize your theme's appearance.
3. Include theme.scss: The core template file that generates the final CSS output based on the variables defined in the previous step.
4. Customization: Optionally add custom fonts or additional specific styles at the end of the file.

# To compile your new theme after creating the .scss file
npm run build:styles

To use the React wrapper, install @revealjs/react along with its peer dependencies: reveal.js, react, and react-dom.

Note: The package only provides React bindings. You are responsible for importing Reveal CSS, themes, and any plugins you intend to use.

npm i @revealjs/react reveal.js react react-dom
# or
yarn add @revealjs/react reveal.js react react-dom

The Reveal entrypoint allows you to call certain configuration and event methods before initialize() is actually executed. These calls are queued and automatically applied to the RevealApi instance once initialization completes.

Supported methods for queuing include:

• configure
• on
• off
• addEventListener
• removeEventListener
• registerPlugin

This ensures that event listeners and configurations are applied correctly even if they are defined before the DOM is fully ready or initialize() is called.

import Reveal from './js/index.ts';

// These calls are queued and executed after initialize()
Reveal.on('ready', () => {
  console.log('Presentation is ready!');
});

Reveal.configure({ hash: true });

// Finally, trigger the initialization
Reveal.initialize();

Pass a config object to the Deck component to set Reveal options. This object maps directly to the Reveal configuration object.

Plugins should be passed to the plugins prop on Deck. Plugins are registered once during initialization and are not re-applied on subsequent renders.

import { Deck, Slide } from '@revealjs/react';
import 'reveal.js/reveal.css';
import 'reveal.js/theme/black.css';
import 'reveal.js/plugin/highlight/monokai.css';
import RevealHighlight from 'reveal.js/plugin/highlight';

export function Presentation() {
  return (
    <Deck
      config={{
        width: 1280,
        height: 720,
        hash: true,
        controls: true,
        progress: true,
        transition: 'slide',
      }}
      plugins={[RevealHighlight]}
    >
      <Slide>Configured deck</Slide>
    </Deck>
  );
}

You can embed images in your Markdown-based slides using standard Markdown image syntax: ![alt text](url).

![External Image](https://static.slid.es/logo/v2/slides-symbol-512x512.png)

reveal.js supports Markdown for defining slide content. You can use standard Markdown syntax for headings, text, and special elements like images and mathematical equations.

To create speaker notes, use the Note: prefix followed by your text. This content will only be visible in the speaker notes window during a presentation.

## External 1.1

Content 1.1

Note: This will only appear in the speaker notes window.

## External 3.3 (Image)

![External Image](https://static.slid.es/logo/v2/slides-symbol-512x512.png)

## External 3.4 (Math)

$$ J(\theta_0,\theta_1) = \sum_{i=0} $$

Mathematical equations can be included in Markdown slides using LaTeX-style syntax wrapped in double dollar signs ($$ ... $$).

$$ J(\theta_0,\theta_1) = \sum_{i=0} $$