HTML to PowerPoint Converter
Convert HTML to PowerPoint (.pptx) with excellent Hebrew/RTL support using PptxGenJS.
Features
- Two conversion modes:
- Text mode: Parses HTML and creates native PPTX elements (editable text, bullets, etc.) - Image mode: Screenshots HTML pages for pixel-perfect complex layouts
- Automatic RTL detection: Detects Hebrew/Arabic and enables RTL mode
- Hebrew font support: Uses Heebo font by default for Hebrew content
- Multiple input sources: Local files, URLs, or piped content
- Slide splitting: Auto-split by sections or custom CSS selectors
Setup (One-time)
cd ~/.claude/skills/html-to-pptx && npm installQuick Usage
Basic conversion:
node ~/.claude/skills/html-to-pptx/scripts/html-to-pptx.js input.html output.pptxHebrew document with RTL:
node ~/.claude/skills/html-to-pptx/scripts/html-to-pptx.js hebrew.html presentation.pptx --rtlConvert URL to PowerPoint:
node ~/.claude/skills/html-to-pptx/scripts/html-to-pptx.js https://example.com slides.pptxPipe HTML content:
echo "<h1>שלום עולם</h1><p>תוכן בעברית</p>" | node ~/.claude/skills/html-to-pptx/scripts/html-to-pptx.js - output.pptx --rtlConversion Modes
Text Mode (default for simple HTML)
Parses HTML structure and creates native PowerPoint elements:
- Headings become styled text
- Paragraphs become text boxes
- Lists become bullet points
- Advantage: Editable text in PowerPoint
node ~/.claude/skills/html-to-pptx/scripts/html-to-pptx.js doc.html out.pptx --mode=textImage Mode (for complex layouts)
Screenshots the HTML and embeds as images:
- Preserves exact visual layout
- Supports CSS animations, SVGs, complex tables
- Long pages are split into multiple slides
- Advantage: Pixel-perfect rendering
node ~/.claude/skills/html-to-pptx/scripts/html-to-pptx.js complex.html out.pptx --mode=imageAuto Mode (default)
Automatically detects the best mode based on content complexity.
Options Reference
| Option | Description | Default |
|---|---|---|
--mode=<mode> | Conversion mode: text, image, auto | auto |
--rtl | Force RTL direction for Hebrew/Arabic | auto-detect |
--title=<title> | Presentation title | auto |
--author=<author> | Presentation author | AVIZ |
--subject=<subject> | Presentation subject | - |
--layout=<layout> | LAYOUT_16x9, LAYOUT_4x3, LAYOUT_WIDE | LAYOUT_16x9 |
--font=<font> | Default font | Heebo (Hebrew) / Arial |
--font-size=<size> | Font size in points | 18 |
--background=<color> | Background color (hex, no #) | - |
--slide-per=<selector> | CSS selector to split into slides | - |
--wait=<ms> | Wait time for rendering (image mode) | 2000 |
Examples
Basic presentation from HTML:
node ~/.claude/skills/html-to-pptx/scripts/html-to-pptx.js report.html report.pptxHebrew presentation:
node ~/.claude/skills/html-to-pptx/scripts/html-to-pptx.js hebrew.html slides.pptx --rtl --font=HeeboSplit by sections:
node ~/.claude/skills/html-to-pptx/scripts/html-to-pptx.js doc.html slides.pptx --slide-per=sectionSplit by custom class:
node ~/.claude/skills/html-to-pptx/scripts/html-to-pptx.js doc.html slides.pptx --slide-per=".slide"Custom styling:
node ~/.claude/skills/html-to-pptx/scripts/html-to-pptx.js doc.html slides.pptx --font=David --font-size=24 --background=F5F5F5Complex layout as images:
node ~/.claude/skills/html-to-pptx/scripts/html-to-pptx.js dashboard.html slides.pptx --mode=image --wait=3000Hebrew/RTL Best Practices
For best Hebrew rendering in your HTML:
- Set lang and dir attributes:
<html lang="he" dir="rtl"> - Use UTF-8 encoding:
<meta charset="UTF-8"> - Use Hebrew-supporting fonts: Heebo, David, Noto Sans Hebrew
- Always use
--rtlflag for Hebrew content
Example Hebrew HTML:
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Heebo', sans-serif;
direction: rtl;
text-align: right;
}
</style>
</head>
<body>
<section>
<h1>כותרת המצגת</h1>
<p>זהו תוכן בעברית</p>
<ul>
<li>נקודה ראשונה</li>
<li>נקודה שנייה</li>
</ul>
</section>
</body>
</html>Slide Structure
The converter automatically detects slide boundaries using these markers (in order):
<section>elements<article>elements.slideclass[data-slide]attribute<hr>elements
Or specify your own with --slide-per:
node ~/.claude/skills/html-to-pptx/scripts/html-to-pptx.js doc.html slides.pptx --slide-per="div.page"Troubleshooting
Hebrew text appears reversed
- Use the
--rtlflag - Ensure HTML has
dir="rtl"attribute
Fonts not rendering correctly
- In image mode, increase
--wait=3000for font loading - Use web fonts (Google Fonts) in your HTML
Complex layouts look wrong in text mode
- Use
--mode=imagefor complex CSS layouts - Image mode preserves exact visual appearance
Presentation too long
- Use
--slide-perto control slide breaks - Structure HTML with
<section>elements
Technical Notes
- Uses PptxGenJS v4.x for PPTX generation
- RTL support via
rtlMode: trueproperty - Image mode uses Puppeteer for rendering
- Cheerio for HTML parsing in text mode