Presnly logoPresnly

Vanilla HTML Integration

10 minutes · Medium

Build a PPP-compatible presentation with just HTML. No framework required. Use data-ppp-* attributes to define slides, sections, and speaker notes.

Data Attributes

The vanilla adapter uses HTML data attributes to identify slides and metadata:

PPP data attributeshtml
<!-- Slide definition -->
<div data-ppp-slide>...</div>

<!-- Section grouping (for section navigation) -->
<div data-ppp-slide data-ppp-section="Introduction">...</div>

<!-- Speaker notes (displayed on remote device) -->
<div data-ppp-slide data-ppp-notes="Remember to mention...">...</div>

<!-- Active slide (shown on load) -->
<div data-ppp-slide class="active">...</div>

Complete Example

A full working presentation with PPP support: copy and save as an HTML file.

presentation.htmlhtml
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>My PPP Presentation</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, sans-serif; background: #0a0a0a; color: #fff; }
    [data-ppp-slide] { display: none; height: 100vh; align-items: center; justify-content: center; flex-direction: column; padding: 2rem; }
    [data-ppp-slide].active { display: flex; }
    h1 { font-size: 3rem; margin-bottom: 1rem; }
    h2 { font-size: 2rem; margin-bottom: 0.5rem; }
    p { font-size: 1.25rem; opacity: 0.8; max-width: 40ch; text-align: center; }
  </style>
</head>
<body>

  <!-- Slides: use data-ppp-slide attribute -->
  <div data-ppp-slide class="active"
       data-ppp-section="Introduction"
       data-ppp-notes="Welcome everyone! This is our Q1 review.">
    <h1>Q1 2026 Review</h1>
    <p>A look at our progress and plans</p>
  </div>

  <div data-ppp-slide
       data-ppp-section="Introduction"
       data-ppp-notes="Walk through the agenda briefly.">
    <h2>Agenda</h2>
    <p>Revenue, Growth, Roadmap, Q&amp;A</p>
  </div>

  <div data-ppp-slide
       data-ppp-section="Revenue"
       data-ppp-notes="Highlight the 40% YoY growth. Compare with Q1 2025.">
    <h2>Revenue</h2>
    <p>40% year-over-year growth</p>
  </div>

  <div data-ppp-slide
       data-ppp-section="Roadmap"
       data-ppp-notes="Focus on the three key initiatives for Q2.">
    <h2>Roadmap</h2>
    <p>Three key initiatives for Q2</p>
  </div>

  <div data-ppp-slide
       data-ppp-section="Q&A">
    <h1>Questions?</h1>
  </div>

  <!-- Keyboard navigation (optional, for standalone use) -->
  <script>
    document.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowRight' || e.key === ' ') {
        const slides = document.querySelectorAll('[data-ppp-slide]')
        const current = document.querySelector('[data-ppp-slide].active')
        const idx = Array.from(slides).indexOf(current)
        if (idx < slides.length - 1) {
          current.classList.remove('active')
          current.setAttribute('hidden', '')
          slides[idx + 1].classList.add('active')
          slides[idx + 1].removeAttribute('hidden')
        }
      }
      if (e.key === 'ArrowLeft') {
        const slides = document.querySelectorAll('[data-ppp-slide]')
        const current = document.querySelector('[data-ppp-slide].active')
        const idx = Array.from(slides).indexOf(current)
        if (idx > 0) {
          current.classList.remove('active')
          current.setAttribute('hidden', '')
          slides[idx - 1].classList.add('active')
          slides[idx - 1].removeAttribute('hidden')
        }
      }
    })
  </script>

  <!-- PPP integration -->
  <script src="https://presnly.com/ppp/presnly.min.js"></script>
  <script>
    new Presnly({ adapter: 'vanilla' }).connect()
  </script>

</body>
</html>

Next Steps