https://github.com/jeffkit/html-slide-player
A Universal HTML-based Presentation Framework
https://github.com/jeffkit/html-slide-player
Last synced: 4 months ago
JSON representation
A Universal HTML-based Presentation Framework
- Host: GitHub
- URL: https://github.com/jeffkit/html-slide-player
- Owner: jeffkit
- Created: 2025-08-22T06:59:24.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-22T07:35:00.000Z (10 months ago)
- Last Synced: 2025-10-23T04:54:48.878Z (8 months ago)
- Language: HTML
- Size: 34.2 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HTML Slide Player
[](https://badge.fury.io/js/html-slide-player)
[](https://opensource.org/licenses/MIT)
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
```bash
npm install -g html-slide-player
```
### Create Your First Presentation
```bash
# 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:
```javascript
window.presentationConfig = {
meta: {
title: "My Awesome Presentation",
language: "en"
},
slides: [
"slides/welcome.html",
"slides/intro.html",
"slides/conclusion.html"
]
};
```
### Simple Configuration (Backward Compatible)
```javascript
window.slidesConfig = [
"slides/slide1.html",
"slides/slide2.html"
];
```
### Creating Slide Files
Each slide is a self-contained HTML file (1280x720 viewport):
```html
My Slide
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;
}
Welcome to My Presentation
This is a sample slide
```
## 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
```bash
slide-player setup
```
This installs:
- Playwright (for screenshot generation)
- Python PIL (Pillow) for image processing
- python-pptx for PowerPoint generation
### Export Your Presentation
```bash
# 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
```bash
slide-player serve --port 8080
```
### Image Assets
Place images in the `slides/images/` directory and reference them in your slides:
```html
```
### 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](LICENSE) file for details.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## Support
- 📖 [Documentation](https://github.com/jeffkit/html-slide-player#readme)
- 🐛 [Report Issues](https://github.com/jeffkit/html-slide-player/issues)
- 💬 [Discussions](https://github.com/jeffkit/html-slide-player/discussions)