html-slide-player

v1.1.0

Published

3 months ago

Universal HTML-based presentation player framework with CLI

0High
0Medium
0Low

jeffkit

presentation slides html cli player

HTML Slide Player

Universal HTML-based presentation player framework with CLI tools for creating, serving, and exporting HTML slide presentations.

Features

🎬 Live Development Server - Instant preview with auto-refresh
🖱️ Interactive Navigation - Keyboard controls and mode switching
📱 Responsive Design - Automatic scaling for any screen size
🖼️ Export Capabilities - Export to PNG, PDF, and PowerPoint formats
⚡ Zero Configuration - Get started with a single command
🎨 Self-contained Slides - Each slide is an independent HTML file

Quick Start

Installation

npm install -g html-slide-player

Create Your First Presentation

# Create a new directory for your presentation
mkdir my-presentation && cd my-presentation

# Initialize the project
slide-player init

# Start development server
slide-player serve

Your browser will automatically open to http://localhost:3000 with your presentation ready!

CLI Commands

Basic Commands

slide-player init - Initialize a new presentation project
slide-player serve - Start development server (default command)
slide-player serve -p 8080 - Start server on custom port

Export Commands

slide-player export-images - Export slides as PNG images
slide-player export-pdf - Export slides as PDF document
slide-player export-pptx - Export slides as PowerPoint file

Setup

slide-player setup - Install dependencies for export functionality
slide-player --help - Show all available commands

Project Structure

After running slide-player init, your project will have:

my-presentation/
├── index.html          # Main presentation player
├── slides.js           # Slide configuration
└── slides/             # Your slide files
    ├── welcome.html
    ├── getting-started.html
    └── images/         # Image assets

Creating Slides

Slide Configuration

Edit slides.js to configure your presentation:

window.presentationConfig = {
  meta: {
    title: "My Awesome Presentation",
    language: "en"
  },
  slides: [
    "slides/welcome.html",
    "slides/intro.html",
    "slides/conclusion.html"
  ]
};

Simple Configuration (Backward Compatible)

window.slidesConfig = [
  "slides/slide1.html",
  "slides/slide2.html"
];

Creating Slide Files

Each slide is a self-contained HTML file (1280x720 viewport):

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Slide</title>
  <style>
    body {
      font-family: 'Noto Sans SC', sans-serif;
      margin: 0;
      padding: 40px;
      width: 1280px;
      height: 720px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Welcome to My Presentation</h1>
    <p>This is a sample slide</p>
  </div>
</body>
</html>

Navigation Controls

Presentation Mode (Default)

←/→ Arrow Keys - Navigate between slides
Space Bar - Next slide
Home/End - First/Last slide

Mode Switching

Toggle Button - Switch between presentation and interaction modes
Interaction Mode - Allows text selection and scrolling within slides

Export Functionality

Setup Export Dependencies

slide-player setup

This installs:

Playwright (for screenshot generation)
Python PIL (Pillow) for image processing
python-pptx for PowerPoint generation

Export Your Presentation

# Export as images (PNG files)
slide-player export-images

# Export as PDF document
slide-player export-pdf

# Export as PowerPoint presentation
slide-player export-pptx

Exported files are saved in the exported-slides/ directory.

Advanced Usage

Custom Server Port

slide-player serve --port 8080

Image Assets

Place images in the slides/images/ directory and reference them in your slides:

<img src="images/my-diagram.png" alt="Diagram" />

Reordering Slides

Simply reorder the filenames in your slides.js configuration file.

Requirements

Runtime Requirements

Node.js 14+
Modern web browser

Export Requirements (Optional)

Python 3.6+
pip3 (for Python package installation)

License

MIT License - see LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.