HTML Deck Live Editor

WYSIWYG browser-based editor for HTML slide decks.
Runs locally at http://localhost:5050. Exports lossless 16:9 PDF.

Features

• ✏️ Text mode — click any text to edit in-place
• 📐 Layout mode — drag/resize blocks
• 🎨 Save + Render PNG — rebuilds slide PNGs at 3840×2160 (2× retina)
• 📄 Export PDF — lossless PNG→PDF via img2pdf (preserves blur/gradient/shadow)
• ↶ Undo (Cmd+Z) — 80-level history

---

Requirements

• Python 3.9+
• Google Chrome (for PNG rendering via Playwright)

---

Installation

macOS

# 1. Clone
git clone https://github.com/changsunglim/html-deck-editor.git
cd html-deck-editor

# 2. Install dependencies
pip3 install -r requirements.txt
python3 -m playwright install chromium

# 3. Done

Linux

# 1. Clone
git clone https://github.com/changsunglim/html-deck-editor.git
cd html-deck-editor

# 2. Install dependencies
pip3 install -r requirements.txt
python3 -m playwright install chromium

# Playwright on Linux may need system deps:
python3 -m playwright install-deps chromium

Windows

# 1. Clone (run in PowerShell or Git Bash)
git clone https://github.com/changsunglim/html-deck-editor.git
cd html-deck-editor

# 2. Install dependencies
pip install -r requirements.txt
python -m playwright install chromium

Make sure Python is in your PATH. Download from https://python.org (check "Add to PATH" during install).

---

Usage

Start the editor

# macOS / Linux
python3 edit.py path/to/your-deck.html

# Windows
python edit.py path\to\your-deck.html

Browser opens automatically at http://localhost:5050.
Stop with Ctrl+C.

Export PDF (terminal)

# macOS / Linux
./render.sh path/to/your-deck.html path/to/output_dir

# Windows
render.bat path\to\your-deck.html path\to\output_dir

Output: output_dir/deck.pdf — lossless raster, 16:9 (1440×810pt).

---

Toolbar reference

Button	Action
✏️ Text	Click any text to edit
📐 Layout	Drag to move, drag edges to resize
Scope	Selection = selected chars only · Element = whole element
A− / A+	Font size ±4px (min 24px)
Font	Change font family
Color	Text color
BG	Background color (element scope)
↶ Undo	Revert last change (Cmd/Ctrl+Z)
💾 Save	Write HTML to disk
🎨 Save + Render PNG	Save + rebuild slide PNGs
📄 Export PDF	Save + render PNGs + compose PDF → download

---

Expected deck structure

The editor looks for slide containers with class slide-frame inside a .deck wrapper. Any HTML deck following that convention works.

---

License

MIT