HTML Slides

What This Does

HTML Slides helps non-designers create beautiful web presentations without knowing CSS or JavaScript. It offers two modes:

Key Features

Installation

Multiple ways to get HTML Slides set up with your AI coding agent.

Quick Install Recommended

This one command clones the repo, detects your agents, and sets up everything. Run the same command again to update.

curl -sSL https://raw.githubusercontent.com/bluedusk/html-slides/main/remote-install.sh | bash

Install from Cloned Repo

git clone https://github.com/bluedusk/html-slides.git
cd html-slides
./install.sh

Manual Install (per agent)

claude plugin marketplace add bluedusk/html-slides
claude plugin install html-slides

# User-level
ln -s /path/to/html-slides ~/.claude/skills/html-slides

# Project-level
ln -s /path/to/html-slides .claude/skills/html-slides

ln -s /path/to/html-slides ~/.gemini/skills/html-slides

ln -s /path/to/html-slides .github/skills/html-slides

ln -s /path/to/html-slides ~/.codex/skills/html-slides

Updating

Run the same quick install command to update to the latest version:

curl -sSL https://raw.githubusercontent.com/bluedusk/html-slides/main/remote-install.sh | bash

Generating Slides

Open your AI coding agent and describe the presentation you want. The html-slides skill handles layout, styling, and interactivity.

Prompting from text

The simplest way — just describe what you need in plain English:

/html-slides
Create a 10-slide pitch deck for a developer tools startup.
Include stats cards for key metrics, a timeline of milestones,
and a comparison table vs competitors.

Be specific about what you want:

• Number of slides — “Create a 10-slide presentation” gives better results than “create a presentation”
• Component types — “Include flip cards, a timeline, and stats cards” tells the skill exactly what to build
• Your audience — “For a technical audience” vs “for executives” changes the tone
• Theme — “Use the Excalidraw Light theme” or “Use the Binary Architect theme”

Prompting from a file

You can point the skill at an existing file — a text document, markdown file, or even a PowerPoint:

/html-slides
Turn the content in notes.md into a presentation.
Use flip cards for the key concepts and a timeline for the roadmap.

/html-slides
Convert my presentation.pptx to a web slideshow.

/html-slides
Convert my-page.html to a presentation.

Creative mode (Vibe)

For non-technical presentations, use vibe mode. The skill will ask about your content, ask what feeling you want, then show 3 visual style previews to choose from:

/html-slides
Create a vibe presentation about our company culture.
I want it to feel warm and inviting.

What you get

Every generated presentation produces two files:

my-deck.html              ← the presentation (self-contained, open in any browser)
my-deck.notes.json        ← speaker notes (for the HTMLSlides presenter app)

Double-click the .html file to open it in your browser. Arrow keys, Space, Home, and End navigate between slides.

Presenting with HTMLSlides

The HTMLSlides desktop app gives your HTML presentations a professional presenter experience — dual-display, speaker notes, timer, and laser pointer, just like PowerPoint or Keynote.

Open your presentation

Launch HTMLSlides and open your .html file. You can also drag and drop files onto the app, or set up watched folders to auto-discover new presentations.

Dual-display presenter mode

Click Present to start presenting. The app creates two synchronized views:

Both views stay perfectly in sync via a local WebSocket connection. Navigate from the presenter dashboard and the audience view updates instantly.

Screen sharing workflow

Presenter features

Two Modes

HTML Slides offers two distinct presentation modes to match your needs.

Pro Mode Default

Structured interactive components with deterministic output. The AI maps your content to the right component type automatically. Multiple themes available — same components, different visual styles.

Create a presentation about [topic]

Or specify a theme:

Create a presentation about [topic] using the Excalidraw Light theme

Available Themes

Vibe Mode — Creative Themes

AI interprets content freely with distinctive visual styles. The skill will ask about content, feeling, generate 3 style previews, then create the full presentation.

Create a vibe presentation about [topic]

Convert a PowerPoint

Convert existing PowerPoint files to web, preserving all images and content.

Convert my presentation.pptx to a web slideshow

Convert Any HTML

Convert any HTML file into HTML Slides format.

Convert my-page.html to a presentation

Components

Pro mode provides a rich library of interactive components. You can request them by name or describe your content and let the skill pick the right one.

Conversion

HTML Slides can convert existing presentations and documents into its format.

PowerPoint Conversion

Convert existing .pptx files to web presentations, preserving all images and content.

Convert my presentation.pptx to a web slideshow

HTML Conversion

Convert any HTML file into HTML Slides format. Supports a wide range of source formats.

Convert my-page.html to a presentation

Sharing & Export

Deploy your presentation to a live URL or export it as a PDF.

Deploy to a Live URL

Deploy your presentation to Vercel (free) and get a permanent, shareable URL.

bash scripts/deploy.sh ./presentation.html

Export to PDF

Screenshot each slide into a PDF file. Uses Playwright (auto-installs on first run).

bash scripts/export-pdf.sh ./presentation.html

Add the --compact flag for smaller file sizes:

bash scripts/export-pdf.sh ./presentation.html --compact

Output Format

Every generated presentation produces two files in your working directory.

my-deck.html              ← the presentation (self-contained)
my-deck.notes.json        ← speaker notes (for presenter apps)

Notes file structure:

{
  "title": "My Presentation",
  "slides": [
    {
      "slideNumber": 1,
      "slideTitle": "Welcome",
      "notes": "Open with the big vision...",
      "keyPoints": ["Set the stage", "Hook the audience"],
      "transition": "Now let's look at the problem..."
    }
  ]
}