RevealPeerJS

Real-time Collaboration for Reveal.js

Connect all viewers of a slideshow in a shared lobby.
Chat, poll, and play games — right inside your presentation.

Look at the bottom-left corner to get started ↓

CHAT Lobby & Messaging

• Click the chat bubble icon to open the lobby panel
• See all connected users with their colors and roles
• Send messages to the entire lobby or private message a specific user
• Left-click a user in the list to set them as your private message target
• Use the dropdown next to the input field to switch between lobby and private

HUB Controls

As the first visitor (Hub), you get special powers:

Poll Feature

The Hub can launch live polls with a 10-second countdown:

1. Click the Hub icon (orange) in the toolbar
2. Select "Launch Poll"
3. Enter your question and 2-8 answer options
4. Click "Publish Poll"
5. All users see a vote modal with a progress bar countdown
6. After 10 seconds, results are displayed with bar charts

Try it now if you're the Hub!

GAME Pong

Right-click any user in the lobby panel and select "Challenge to Pong":

• A semi-transparent overlay appears on both screens
• Challenger plays on the left, opponent on the right
• Move your mouse (or finger) up and down to control the paddle
• Ball speed increases with each paddle hit
• Speed resets between rounds
• First player to 10 points wins
• Press Esc to exit early

HUB Arena — Top-Down Shooter

The Hub can launch an arena game for all lobby members:

• Click the Hub icon then "Launch Arena"
• Everyone is dropped into a shared 2D map with walls
• Each player is a colored circle with a direction indicator
• H/J/K/L to move left/down/up/right
• Mouse controls your aim direction
• Space fires a burst of bullets toward your cursor
• Bullets stop when they hit a wall, player, or leave the screen
• Hit once: circle becomes half-filled, but movement speed increases
• Hit twice: eliminated
• Last player standing wins!

Hub syncs timing and runs authoritative collision detection.

Settings

Click the user icon in the toolbar to open settings:

• Username — Customize your display name
• Custom Color — Choose a color for your name and messages
• Go Offline — Disconnect from the lobby temporarily
• Dark Mode — Force dark styling on the presentation
• High Contrast — Enhanced visibility for accessibility

All settings are persisted in localStorage across sessions.

Plugin Usage

Add the plugin to any Reveal.js presentation:

<script src="reveal-peerjs.js"></script>
<script>
  Reveal.initialize({
    plugins: [RevealPeerJS]
  });
</script>

Or with ES modules:

import Reveal from 'reveal.js';
import RevealPeerJS from 'reveal-peerjs';

Reveal.initialize({
  plugins: [RevealPeerJS]
});

Architecture

┌──────────────────────────────────┐
│          Reveal.js Deck          │
│                                  │
│  ┌────────────────────────────┐  │
│  │    RevealPeerJS Plugin     │  │
│  │                            │  │
│  │  ┌──────┐  ┌───────────┐  │  │
│  │  │Toolbar│  │LobbyPanel │  │  │
│  │  └──────┘  │ ├─Users   │  │  │
│  │            │ └─Chat    │  │  │
│  │  ┌──────┐  └───────────┘  │  │
│  │  │Settings│ ┌──────────┐  │  │
│  │  │ Modal │ │ HubMenu  │  │  │
│  │  └──────┘ │ ├─JumpAll │  │  │
│  │           │ ├─Follow  │  │  │
│  │  ┌─────┐  │ ├─Polls   │  │  │
│  │  │Pong │  │ └─Arena   │  │  │
│  │  └─────┘  └──────────┘  │  │
│  │  ┌───────┐               │  │
│  │  │Arena  │               │  │
│  │  │Shooter│               │  │
│  │  └───────┘               │  │
│  │  ┌──────────────────┐   │  │
│  │  │  LobbyNetwork    │   │  │
│  │  │  (PeerJS Star)   │   │  │
│  │  └──────────────────┘   │  │
│  └────────────────────────────┘  │
└──────────────────────────────────┘