Introducing
HTML Slides
Beautiful presentations from AI, zero dependencies
by HTML Slides Team
The Promise
One HTML file. No frameworks.
Just open and present.
Every deck is a self-contained .html file that runs anywhere — laptops, phones, projectors, even offline.
Why HTML Slides?
Four Reasons Teams Switch
Click cards to flip & reveal details
📦
Zero Dependencies
Self-contained
click to flip
📦
No npm install, no webpack, no React. One .html file with inline CSS and JS. Email it, Slack it, put it on a USB stick. It just works.
🤖
AI-Native
Agent-ready
click to flip
🤖
Designed to be generated by AI agents. Works with Claude Code, Gemini CLI, GitHub Copilot, and OpenAI Codex out of the box.
🛠
13 Components
Full toolkit
click to flip
🛠
Flip cards, charts, tables, code blocks, architecture flows, timelines, stats — every component a technical presenter needs, built in.
🎨
Anti-AI-Slop
Crafted design
click to flip
🎨
13 curated visual presets inspired by real design references. No generic purple gradients. Every deck looks custom-crafted.
The Difference
Traditional Slides vs HTML Slides
Legacy
Traditional
Large binary files, version control pain, limited animations, vendor lock-in, corporate templates
PowerPoint / Google Slides
vs
Modern
HTML Slides
Git-friendly, rich CSS animations, runs anywhere, AI-generated in minutes, 13 distinctive style presets
Single .html file
How It Works
From Idea to Presentation
Three steps, zero friction
📄
Your Content
Input
Topic, notes, or outline
🤖
AI Agent
Generator
Reads SKILL.md, picks style, builds deck
🌐
HTML File
Output
Open in browser, present immediately
Under the Hood
What a Generated Slide Looks Like
Clean, semantic HTML with animation classes
1<div class="slide active" data-slide="0">
2 <p class="slide-tag anim-1">Introducing</p>
3 <h2 class="anim-2">
4 Build <span class="rainbow-text">Beautiful</span> Decks
5 </h2>
6 <p class="subtitle anim-3">
7 Zero dependencies. One HTML file.
8 </p>
9 <div class="rainbow-line anim-4"></div>
10</div>
Before & After
Presentation Workflow Transformation
Click to flip and compare
😣
Before: Manual Design
❌
Hours of manual work
click to flip
😣
The Old Way
Hours in PowerPoint. Fighting alignment. Hunting for icons. Exporting to PDF. Emailing 50MB attachments.
Broken fonts on the projector laptop.
vs
⚡
After: AI + HTML Slides
✔️
Minutes, not hours
click to flip
⚡
The New Way
Describe your topic. AI picks the style. Full deck in 2 minutes. One .html file. Share a link.
Looks perfect on every screen.
By the Numbers
HTML Slides in Production
13
Components
Interactive component types
13
Style Presets
Curated visual themes
4
AI Agents
Supported out of the box
Component Library
What You Can Build
Click any card to expand details
📊
Data Visualization
Chart.js with 8 chart types
Chart.js integration with 8 chart types: bar, line, pie, doughnut, radar, polarArea, scatter, and bubble. All charts auto-theme from CSS variables.
▼
👉
Interactive Elements
Flip cards, expandable panels, hover effects
Flip cards reveal details on click. Expandable cards show hidden content. Tables highlight rows on hover. Every interaction uses smooth CSS transitions with no JS libraries required.
▼
💻
Code & Architecture
Syntax highlighting, flow diagrams
Syntax-highlighted code blocks with One Dark Pro theme. Architecture flow diagrams with animated connected boxes. Perfect for technical talks and API overviews.
▼
📚
Narrative Components
Statements, stats, timelines, CTAs
Statement slides for bold claims. Stats cards for key metrics. Status timelines for roadmaps. VS comparison cards for head-to-head analysis. CTA boxes for closing with resources.
▼
Roadmap
HTML Slides Development Timeline
v0.1 — 11 component templates with Dark Interactive preset
v0.2 — Chart.js integration with 8 chart types
v0.3 — Table component, Agent Skills standard, universal installer
v0.4 — Slide export to PDF, presenter notes view
v0.5 — Live collaboration, real-time audience polls
Compatibility
Supported AI Agents
| Agent |
User Install |
Project Install |
Plugin Support |
| Claude Code |
~/.claude/skills/ |
.claude/skills/ |
Yes (marketplace) |
| Gemini CLI |
~/.gemini/skills/ |
.gemini/skills/ |
Via extensions |
| GitHub Copilot |
— |
.github/skills/ |
— |
| OpenAI Codex |
~/.codex/skills/ |
.codex/skills/ |
Via config.toml |
Benchmarks
Presentation Creation Time (minutes)
Time to create a 15-slide deck
Growth
Monthly Skill Installations
Tracking adoption across AI agent platforms
Distribution
Component Usage Across All Decks
Which components do presenters reach for most?
Breakdown
Style Preset Popularity
Dark Interactive dominates — but variety matters
Comparison
HTML Slides vs Traditional Tools
Multi-dimensional capability comparison
Reach
Agent Adoption by Category
Active users across different segments
Correlation
Slide Count vs Generation Time
Linear scaling — more slides, predictable time
Ecosystem
Style Preset Ecosystem
Complexity vs satisfaction vs adoption
Get Started
Install in 30 seconds.
Present in 5 minutes.
git clone, ./install.sh, done. Works with every major AI coding agent.
Start Building Beautiful Presentations
One skill, four agents, thirteen components, zero dependencies.
Resources
●GitHub: github.com/bluedusk/html-slides
●Website: htmlslides.com
●Live Demo: bluedusk.github.io/html-slides/intro-to-mcp.html
●Agent Skills Standard: agentskills.io
Built with HTML Slides