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 ↓

How It Works

The first visitor to open this presentation becomes the HUB.
All subsequent visitors connect as participants in a shared lobby.

Auto-Discovery

The lobby ID is derived from the page URL. No setup needed — just share the link.

Peer-to-Peer

Powered by PeerJS and WebRTC. No server required beyond the signaling service.

Star Topology

The hub relays messages between all peers for reliable delivery.

Low Latency

Direct peer connections for real-time features like the Pong game.

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:

Jump All

Instantly navigate all viewers to your current slide. Great for guided presentations.

Follow Mode

Continuously sync your slide position to all viewers. They follow along as you present.

Live Polls

Create a question with configurable answers. Viewers get 10 seconds to vote, then see results.

Hub Badge

Your username displays with a [HUB] tag so everyone knows who's in charge.

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

Open a participant's More actions button (or context menu) 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:

  • Choose Vanguard, Scout, Guardian, Ranger, or Engineer in Settings
  • Click the Hub icon then "Launch Arena"
  • Everyone is dropped into a shared 2D map with walls
  • Each archetype has its own silhouette, durability, movement, loadout, and item traits
  • W/A/S/D or H/J/K/L to move
  • Mouse controls your aim direction
  • Click or Space fires toward your cursor
  • Bullets stop when they hit a wall, player, or leave the screen
  • Collect healing, armor, weapon, HASTE, AMP, MAGNET, and REGEN drops
  • Follow kills, pickups, wave milestones, and departures in the live event feed
  • The scoreboard tracks authoritative kills, health, damage, and pickups
  • A one-player lobby switches to escalating zombie survival
  • Last player standing wins!

The Hub validates character profiles and owns movement, weapons, pickups, effects, statistics, collision detection, seeded randomness, and results.

Settings

Click the user icon in the toolbar to open settings:

  • Username — Customize your display name
  • Identity Color — Choose a visible marker without sacrificing text contrast
  • Arena Character — Select a persistent class and inspect its stats
  • Work Offline — Disconnect from the lobby temporarily
  • Darken Presentation — Apply dark styling to slide content
  • Enhanced Contrast — Strengthen borders, focus, and text separation

Changes are staged until Save & Apply, then 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)   │   │  │
│  │  └──────────────────┘   │  │
│  └────────────────────────────┘  │
└──────────────────────────────────┘

Try It Out!

Open this page in another browser tab or window
to see the lobby in action.

▼

Check the toolbar in the bottom-left corner