Studio Founder

The Meetup Talk That Built Itself: Zero-Dependency HTML Slides

12 min, 47KB, 0 depsDesign & Content5 min read

The Meetup Talk That Built Itself: Zero-Dependency HTML Slides

Key Takeaway

We built a keynote-quality presentation as a single HTML file — no npm, no build tools, no dependencies — with animation-rich transitions and PDF export, for the Mr.Chief Paris Meetup with 93+ attendees.

The Problem

Presentation tools are either too simple or too complicated.

PowerPoint and Google Slides give you static rectangles. Reveal.js gives you web-native slides but requires npm, Node.js, a build pipeline, and a package.json longer than your talk. Keynote looks great but locks you into macOS and proprietary formats.

For the Mr.Chief Paris Meetup, we needed a presentation that:

Runs on any machine (presenter's laptop could die — use anyone's)
Has smooth, non-cheesy animations
Works in any browser without installing anything
Can be hosted as a URL for attendees
Exports to PDF for handouts
Can be built and iterated on in minutes, not hours

The constraint: zero external dependencies. One HTML file. Double-click to open. That's it.

The Solution

The create-html-slides skill in Mr.Chief generates self-contained HTML presentations with inline CSS and JavaScript. Keynote-quality animations. Responsive layout. Keyboard navigation. PDF export. All in a single file.

We described what we wanted. The agent built it.

The Process (with code/config snippets)

The prompt:

View details

Create an HTML presentation for the Mr.Chief Paris Meetup.

Theme: Dark mode, tech aesthetic, subtle gradients
Slides: 15 slides covering agent architecture, live demos, roadmap
Style: Minimal text, big visuals, code snippets with syntax highlighting
Animations: Fade-in for content, slide transitions, code typewriter effect

Requirements:
- Single HTML file, zero dependencies
- Keyboard navigation (arrow keys + spacebar)
- Progress bar at bottom
- Slide counter
- PDF export button
- Responsive (works on projector AND phone)

The agent generates a complete HTML file. Here's the core structure:

htmlShow code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mr.Chief Paris Meetup — Agent Architecture</title>
  <style>
    /* All styles inline — no external CSS */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0F172A;
      color: #E2E8F0;
      overflow: hidden;
    }
    .slide {
      width: 100vw; height: 100vh;
      display: none; position: absolute;
      padding: 80px;
      align-items: center; justify-content: center;
      flex-direction: column;
    }
    .slide.active { display: flex; }
    .slide.enter { animation: fadeIn 0.4s ease-out; }

    /* Animations */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes typewriter {
      from { width: 0; }
      to { width: 100%; }
    }

    /* Progress bar */
    .progress {
      position: fixed; bottom: 0; left: 0;
      height: 3px; background: #6366F1;
      transition: width 0.3s ease;
    }

    /* Code blocks */
    .code-block {
      background: #1E293B;
      border-radius: 12px;
      padding: 24px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 18px;
      line-height: 1.6;
      overflow-x: auto;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .slide { padding: 24px; }
      h1 { font-size: 32px; }
    }
  </style>
</head>
<body>
  <div class="slide active" data-slide="1">
    <h1 style="font-size: 64px; font-weight: 800;
               background: linear-gradient(135deg, #6366F1, #8B5CF6);
               -webkit-background-clip: text; color: transparent;">
      Mr.Chief
    </h1>
    <p style="font-size: 24px; color: #94A3B8; margin-top: 16px;">
      31 Agents. 8 Teams. One Architecture.
    </p>
  </div>

  <!-- ... 14 more slides ... -->

  <div class="progress" id="progress"></div>
  <div class="counter" id="counter">1 / 15</div>

  <script>
    // All JS inline — no external scripts
    const slides = document.querySelectorAll('.slide');
    let current = 0;

    function showSlide(n) {
      slides[current].classList.remove('active', 'enter');
      current = Math.max(0, Math.min(n, slides.length - 1));
      slides[current].classList.add('active', 'enter');
      document.getElementById('progress').style.width =
        ((current + 1) / slides.length * 100) + '%';
      document.getElementById('counter').textContent =
        (current + 1) + ' / ' + slides.length;
    }

    document.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowRight' || e.key === ' ') showSlide(current + 1);
      if (e.key === 'ArrowLeft') showSlide(current - 1);
      if (e.key === 'f') document.documentElement.requestFullscreen();
    });
  </script>
</body>
</html>

Total file size: 47KB. Loads instantly. Works offline.

The Results

Metric	PowerPoint	Reveal.js	HTML Slides Agent
Dependencies	Office suite	npm + Node.js	None
File size	2-8 MB	50+ MB (node_modules)	47 KB
Build step	None	Required	None
Animations	Basic	Advanced	Advanced
Runs in browser	Needs conversion	Yes	Yes
Works offline	Yes	After build	Yes
Creation time	3-5 hours	2-4 hours	12 minutes
Hostable as URL	No	Yes	Yes
PDF export	Native	Plugin needed	Built-in

At the meetup, 93+ attendees watched the presentation. Several asked how we built it. "It's one HTML file" got a laugh. Then they wanted to know how to do it themselves.

Try It Yourself

Describe your presentation: topic, number of slides, visual theme, and any special elements (code blocks, diagrams, animations).

The agent generates a single HTML file. Open it in a browser. Present.

If you want to iterate, just ask for changes. The agent modifies the same file. No rebuild, no recompile, no dependency hell.

Start free on Mr.Chief →

The best presentations have zero dependencies — including dependency on a designer.

HTML slidespresentationszero dependenciesweb

Related case studies

Studio Founder

Data Visualizations in Slides That PowerPoint Can't Handle

We embed D3.js charts, animated counters, and live API data into HTML slides — interactive investor presentations that PowerPoint literally cannot build.

Interactive D3.js vs static charts5 min read

Studio Founder

Batch-Editing 50 Slides Across 3 Decks — In One Command

We updated fonts, colors, logos, and footer text across 50 slides in 3 different PowerPoint decks — in one batch command instead of opening each file manually.

50 slides in 2 min4 min read

Studio Founder

We Generated a 20-Slide Investor Deck With Speaker Notes in 3 Minutes

We went from a bullet-point outline to a 20-slide branded PowerPoint deck with speaker notes, charts, and proper layouts in 3 minutes — replacing a 2-day design process.

3 min PPTX with speaker notes4 min read

Want results like these?

Start free with your own AI team. No credit card required.

Start Free →Browse agents

Studio Founder

The Meetup Talk That Built Itself: Zero-Dependency HTML Slides

12 min, 47KB, 0 depsDesign & Content5 min read

The Meetup Talk That Built Itself: Zero-Dependency HTML Slides

Key Takeaway

The Problem

Presentation tools are either too simple or too complicated.

For the Mr.Chief Paris Meetup, we needed a presentation that:

Runs on any machine (presenter's laptop could die — use anyone's)
Has smooth, non-cheesy animations
Works in any browser without installing anything
Can be hosted as a URL for attendees
Exports to PDF for handouts
Can be built and iterated on in minutes, not hours

The constraint: zero external dependencies. One HTML file. Double-click to open. That's it.

The Solution

We described what we wanted. The agent built it.

The Process (with code/config snippets)

The prompt:

View details

Create an HTML presentation for the Mr.Chief Paris Meetup.

Theme: Dark mode, tech aesthetic, subtle gradients
Slides: 15 slides covering agent architecture, live demos, roadmap
Style: Minimal text, big visuals, code snippets with syntax highlighting
Animations: Fade-in for content, slide transitions, code typewriter effect

Requirements:
- Single HTML file, zero dependencies
- Keyboard navigation (arrow keys + spacebar)
- Progress bar at bottom
- Slide counter
- PDF export button
- Responsive (works on projector AND phone)

The agent generates a complete HTML file. Here's the core structure:

htmlShow code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mr.Chief Paris Meetup — Agent Architecture</title>
  <style>
    /* All styles inline — no external CSS */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0F172A;
      color: #E2E8F0;
      overflow: hidden;
    }
    .slide {
      width: 100vw; height: 100vh;
      display: none; position: absolute;
      padding: 80px;
      align-items: center; justify-content: center;
      flex-direction: column;
    }
    .slide.active { display: flex; }
    .slide.enter { animation: fadeIn 0.4s ease-out; }

    /* Animations */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes typewriter {
      from { width: 0; }
      to { width: 100%; }
    }

    /* Progress bar */
    .progress {
      position: fixed; bottom: 0; left: 0;
      height: 3px; background: #6366F1;
      transition: width 0.3s ease;
    }

    /* Code blocks */
    .code-block {
      background: #1E293B;
      border-radius: 12px;
      padding: 24px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 18px;
      line-height: 1.6;
      overflow-x: auto;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .slide { padding: 24px; }
      h1 { font-size: 32px; }
    }
  </style>
</head>
<body>
  <div class="slide active" data-slide="1">
    <h1 style="font-size: 64px; font-weight: 800;
               background: linear-gradient(135deg, #6366F1, #8B5CF6);
               -webkit-background-clip: text; color: transparent;">
      Mr.Chief
    </h1>
    <p style="font-size: 24px; color: #94A3B8; margin-top: 16px;">
      31 Agents. 8 Teams. One Architecture.
    </p>
  </div>

  <!-- ... 14 more slides ... -->

  <div class="progress" id="progress"></div>
  <div class="counter" id="counter">1 / 15</div>

  <script>
    // All JS inline — no external scripts
    const slides = document.querySelectorAll('.slide');
    let current = 0;

    function showSlide(n) {
      slides[current].classList.remove('active', 'enter');
      current = Math.max(0, Math.min(n, slides.length - 1));
      slides[current].classList.add('active', 'enter');
      document.getElementById('progress').style.width =
        ((current + 1) / slides.length * 100) + '%';
      document.getElementById('counter').textContent =
        (current + 1) + ' / ' + slides.length;
    }

    document.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowRight' || e.key === ' ') showSlide(current + 1);
      if (e.key === 'ArrowLeft') showSlide(current - 1);
      if (e.key === 'f') document.documentElement.requestFullscreen();
    });
  </script>
</body>
</html>

Total file size: 47KB. Loads instantly. Works offline.

The Results

Metric	PowerPoint	Reveal.js	HTML Slides Agent
Dependencies	Office suite	npm + Node.js	None
File size	2-8 MB	50+ MB (node_modules)	47 KB
Build step	None	Required	None
Animations	Basic	Advanced	Advanced
Runs in browser	Needs conversion	Yes	Yes
Works offline	Yes	After build	Yes
Creation time	3-5 hours	2-4 hours	12 minutes
Hostable as URL	No	Yes	Yes
PDF export	Native	Plugin needed	Built-in

At the meetup, 93+ attendees watched the presentation. Several asked how we built it. "It's one HTML file" got a laugh. Then they wanted to know how to do it themselves.

Try It Yourself

Describe your presentation: topic, number of slides, visual theme, and any special elements (code blocks, diagrams, animations).

The agent generates a single HTML file. Open it in a browser. Present.

If you want to iterate, just ask for changes. The agent modifies the same file. No rebuild, no recompile, no dependency hell.

Start free on Mr.Chief →

The best presentations have zero dependencies — including dependency on a designer.

HTML slidespresentationszero dependenciesweb

Related case studies

Studio Founder

Data Visualizations in Slides That PowerPoint Can't Handle

We embed D3.js charts, animated counters, and live API data into HTML slides — interactive investor presentations that PowerPoint literally cannot build.

Interactive D3.js vs static charts5 min read

Studio Founder

Batch-Editing 50 Slides Across 3 Decks — In One Command

We updated fonts, colors, logos, and footer text across 50 slides in 3 different PowerPoint decks — in one batch command instead of opening each file manually.

50 slides in 2 min4 min read

Studio Founder

We Generated a 20-Slide Investor Deck With Speaker Notes in 3 Minutes

We went from a bullet-point outline to a 20-slide branded PowerPoint deck with speaker notes, charts, and proper layouts in 3 minutes — replacing a 2-day design process.

3 min PPTX with speaker notes4 min read

Want results like these?

Start free with your own AI team. No credit card required.

Start Free →Browse agents