Presnly logoPresnly

Reveal.js Integration

3 minutes · Easy

Add full Presnly remote control support to any Reveal.js presentation. The PPP Reveal.js adapter maps directly to Reveal's JavaScript API: navigation, speaker notes, sections, and display control all work out of the box.

Step 1: Add the Script Tag

Add presnly.min.jsto your HTML and initialize after Reveal.js is ready. Here's a complete example:

index.htmlhtml
<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/theme/black.css">
</head>
<body>
  <div class="reveal">
    <div class="slides">
      <section data-section="Intro">
        <h1>My Presentation</h1>
        <aside class="notes">Welcome everyone to the talk.</aside>
      </section>
      <section data-section="Main">
        <h2>Slide 2</h2>
        <aside class="notes">Key point about our product.</aside>
      </section>
      <section>
        <h2>Slide 3</h2>
      </section>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js"></script>

  <!-- Add PPP support: just these 2 lines -->
  <script src="https://presnly.com/ppp/presnly.min.js"></script>

  <script>
    Reveal.initialize().then(() => {
      new Presnly({ adapter: 'reveal' }).connect()
    })
  </script>
</body>
</html>

Step 2: Configure Capabilities (Optional)

By default, all capabilities your adapter supports are enabled. You can explicitly opt into specific ones:

Advanced configurationjavascript
// With capabilities opt-in
Reveal.initialize().then(() => {
  new Presnly({
    adapter: 'reveal',
    capabilities: [
      'navigation.jump',
      'navigation.sections',
      'content.notes',
      'content.metadata',
      'display',
      'lifecycle',
    ],
    onConnect: () => console.log('Presnly connected!'),
    onDisconnect: () => console.log('Presnly disconnected'),
  }).connect()
})

Step 3: Open in Presnly

Open your presentation URL in the Presnly Mac app's built-in browser. Presnly will automatically detect PPP support and unlock advanced features:

OKJump to any slide by number from iPhone
OKSpeaker notes displayed on your remote device
OKNavigate by section (requires data-section attributes)
OKAccurate slide count on all remote devices

Speaker Notes

Reveal.js speaker notes are automatically picked up by PPP. Add <aside class="notes"> elements inside your slides:

Speaker noteshtml
<section>
  <h2>Revenue Growth</h2>
  <p>Q1 showed 40% year-over-year growth.</p>

  <!-- Speaker notes: visible on iPhone via PPP -->
  <aside class="notes">
    Mention the 40% growth figure. Compare with
    last year's Q1 which was only 15%.
    Highlight the new enterprise contracts.
  </aside>
</section>

These notes will appear on your iPhone, iPad, or Apple Watch when controlling the presentation through Presnly.

Section Navigation

Add data-section attributes to group slides into navigable sections. This lets presenters jump to topics instead of counting slide numbers:

Section attributeshtml
<!-- Add data-section to group slides into navigable sections -->
<section data-section="Introduction">
  <h1>Welcome</h1>
</section>
<section data-section="Introduction">
  <h2>Agenda</h2>
</section>

<section data-section="Revenue">
  <h2>Q1 Numbers</h2>
</section>
<section data-section="Revenue">
  <h2>Growth Chart</h2>
</section>

<section data-section="Roadmap">
  <h2>What's Next</h2>
</section>

Next Steps