DEV Community

龙虾牧马人
龙虾牧马人

Posted on

HTML Beat the Entire PPT Industry: No-Build, AI-Powered Slides

#html

HTML Beat the Entire PPT Industry: No-Build, AI-Powered Slides

TL;DR: 4,900★ open-source project that lets you create professional presentations with pure HTML/CSS/JS + AI. 36 themes, 31 layouts, 47 animations, 15 templates, zero build step, and a speaker mode that's pixel-perfect. MIT license.

Summary

We've all been there: 2 hours before a presentation, still wrestling with PowerPoint animations, font inconsistencies. A new open-source project called html-ppt-skill (4,900★) takes a radically different approach — ditch the PowerPoint, ditch Canva, and just use HTML. 36 themes, 31 layouts, 47 animations, 15 templates, zero build.

The real killer feature: Speaker Mode — pixel-perfect iframe sync with teleprompter and timer.

What Problem Does It Solve?

The 80/20 trap: 80% of time on "look good", 20% on content.

Traditional tools:

  • PowerPoint: 200MB install, $160/yr, format hell
  • Canva: subscription, requires internet
  • python-pptx: programmatic, no visual feedback

html-ppt-skill flips it: AI generates HTML, you focus on the message.

Quick Start 

npx skills add https://github.com/lewislulu/html-ppt-skill
# or
git clone https://github.com/lewislulu/html-ppt-skill
# Open any template in browser — no build step
Enter fullscreen mode Exit fullscreen mode

The Numbers

Dimension Count
Themes 36
Templates 15
Layouts 31
CSS Animations 27
Canvas Effects 20
Speaker Mode ✅

Speaker Mode (The Real MVP)

Press S. Four draggable cards:

  1. Current Slide — live iframe preview
  2. Next Slide — same, N+1
  3. Script — 150-300 words, large font
  4. Timer — resettable

Tech: postMessage + BroadcastChannel API. Zero white flash on slide change.

Script Writing Rules

  1. Write cue signals, not full scripts
  2. 150-300 words per slide (2-3 min)
  3. Write for the ear, not the eye

Comparison

Dimension PowerPoint Canva html-ppt-skill
Install 200MB+ Web Zero
Cost $160/yr $120-240/yr Free (MIT)
AI gen ❌ ✅ (Prem) ✅
Offline Partial ❌ ✅
Animations Basic Rich 47
Speaker mode Limited ✅ Pixel-perfect

FAQ

Q: Need HTML knowledge? A: No. AI generates everything.

Q: Export to PDF? A: Yes — print from browser.

Q: Zero build? A: Open HTML in browser. No npm, no webpack, no Docker.

Q: Custom fonts? A: Yes — CSS custom properties.

Personal Take

Built a pitch deck in 15 minutes. AI wrote content, chose cyberpunk theme, arranged layouts. Pressed S, practiced with teleprompter, presented. No PowerPoint. No Canva. No panic.

Why This Matters

Most "AI presentation tools" are GPT wrappers that dump text into a Canva template. This project redefines what a presentation IS. HTML pages are universally accessible, infinitely scalable. No software tax, no format lock-in.

The best slide deck is the one you didn't build by hand.

Top comments (0)