HTML-TO-PPTX

_{📖 English ｜ 中文}

Convert HTML slide decks into editable .pptx: text stays as native PowerPoint textboxes, fonts are subset on demand, complex CSS decorations fall back to local snapshots, and HTML/PPT side-by-side audit material is generated for review.

Original HTML	html-to-pptx output, opened in PowerPoint

_{Text stays as editable vectors; complex decorations are rasterized locally.}

Why this exists

HTML is a great medium for slide decks — layout, typography, animation, and complex visuals are all more flexible than in PowerPoint. But delivery often requires .pptx, and most "HTML → PPT" tools flatten each page into a single image, leaving text uneditable, unsearchable, and pixelated when zoomed.

html-to-pptx avoids the "whole-page screenshot" route. It decomposes HTML into objects PowerPoint understands: text becomes editable textboxes; simple geometry becomes native shapes / lines; effects PPT can't express natively (gradients, shadows, filters, blend modes) are snapshotted locally and placed as a decoration layer behind the vector text.

The result: the output stays close to the HTML source while remaining searchable, editable, and rescalable in PowerPoint / WPS — not a stack of immutable images.

Gets better with use

Each install keeps a private references/lessons-learned.md — seeded once from the committed template, then gitignored. When the audit loop turns up a generalizable HTML anti-pattern or OOXML boundary, the fix recipe gets appended there. Every subsequent convert re-reads the file, so decks sharing traits with ones you've already audited tend to land cleaner on the first pass.

The local copy is never overwritten by upstream — git pull updates the template, not your accumulated notes.

What it handles

Supports single-file HTML decks from beautiful-html-templates / guizang-ppt-skill / Reveal.js / hand-written decks / browser fullscreen pages, with automatic slide detection.

CSS → PPT routing:

For the full CSS coverage matrix, see references/supported-css.md.

Quick start (Claude Code)

Install

In a Claude Code session, just hand Claude the repo URL:

Install this skill for me: https://github.com/Hasasasa/claude-skill-html-to-pptx

Claude will git clone it into the right skills directory for your platform (macOS / Linux: ~/.claude/skills/; Windows: %USERPROFILE%\.claude\skills\) and walk you through installing Python 3.10+, Playwright, and dependencies. System-level steps will still ask for your confirmation.

Use

After install, ask in plain language:

Convert D:\path\to\deck.html to pptx

Full skill invocation rules, audit mode, and fix discipline are in SKILL.md.

Manual usage (without Claude Code)

If you're not using Claude Code, clone the repo and run the CLI directly.

Install

Requires Python 3.10+ and pip.

git clone https://github.com/Hasasasa/claude-skill-html-to-pptx.git
cd claude-skill-html-to-pptx
pip install -r requirements.txt
python -m playwright install chromium

The visual audit step renders .pptx to PNG. Either of the following works:

• Windows + Office
• LibreOffice

requirements.txt already includes pywin32 (Windows-only) and pdf2image. For the LibreOffice route, you also need LibreOffice installed on the system; on Windows, pdf2image typically needs Poppler too. The .pptx itself still generates without a renderer — only the HTML/PPT side-by-side audit images are skipped.

Run

python convert.py path/to/deck.html

Output goes to path/to/deck.pptx next to the input. On first run, a working copy at path/to/deck.audited.html is created automatically; all subsequent audit fixes modify this copy, leaving the original HTML untouched.

Common flags:

More demos

Each pair: HTML rendering on the left, html-to-pptx output (rendered in PowerPoint) on the right.

Signal

HTML	html-to-pptx output

Market Outlook

HTML	html-to-pptx output

OpenClaw — Human-AI Collaboration Framework

HTML	html-to-pptx output

8-Bit Orbit

HTML	html-to-pptx output

Apex Group (Bold Poster)

HTML	html-to-pptx output

Broadside

HTML	html-to-pptx output

Pipeline

[1 preflight] -> [2 measure] -> [3 assemble] -> [4 embed fonts] -> [5a self check] -> [5b visual audit]
 preflight.py     measure.py      assemble.py     embed_fonts.py      self_check.py      visual_audit.py

• preflight: scan for high-risk HTML/CSS patterns.
• measure: probe the DOM with Playwright, extracting text, shape, media, and decoration records.
• assemble: write OOXML — textbox / shape / media / snapshot.
• embed_fonts: subset and embed fonts by characters actually used.
• self_check: scan PPTX for structural risks and call the renderer to export per-slide PNGs.
• visual_audit: generate HTML/PPT side-by-side images, contact sheet, audit index, and the review prompt.

Design principles

Further reading

• SKILL.md: Claude Code skill invocation rules, audit mode, fix discipline.
• references/methodology.md: the five-step pipeline and anti-assumption checklist.
• references/supported-css.md: CSS-to-PPT routing coverage matrix.
• references/lessons-learned.md.example: historical issues, HTML anti-patterns, and OOXML boundaries.