📖 Original article: GitHub Gist
By Mohamed Amine Ben Mallessa — Lead Dev at Sollea AI
Generate customized vector PDF posters and high-res PNG images server-side on the fly. No fat client, no browser UI, no paid SaaS.
The solution? Playwright (headless Chromium) + versioned HTML templates.
Form → HTML template + postMessage → Playwright headless → A4 vector PDF + 300 DPI PNG
The template: a self-contained HTML file with inline CSS and SVG. No external dependencies, no font , no network requests.
The render: Playwright opens the template, injects data via JavaScript, exports as PDF (1 page, vector, A4) and PNG (300 DPI, 2480×3508px).
The speed: ~3.5 seconds per document. Fully reproducible.
| Tool | Reliability | Vector | Size | Ease of use |
|---|---|---|---|---|
| wkhtmltopdf | ⚠️ CSS issues | ✅ | ❌ Unmaintained | |
| Puppeteer | ✅ | ✅ | ✅ | ⚠️ Heavy |
| Playwright | ||||
| ✅✅ | ✅✅ | ✅✅ | ✅✅ |
Playwright handles fonts, viewport, headless mode natively, and integrates perfectly with FastAPI.
One HTML template = live preview in the browser AND final PDF/PNG render. No duplicate code, no preview/production divergence.
postMessage({ type: "setState", state: formData })
→ the template updates. Whether inside a frontend iframe or Playwright's headless Chromium.
Originally published on GitHub Gist.
Mohamed Amine Ben Mallessa — Lead Dev at Sollea AI
🔗 Sollea AI · GitHub · LinkedIn
Sollea AI — Full-stack development, AI automation, custom solutions.
🔗 ** Sollea AI** ·
Team led by Mohamed Amine Ben Mallessa — Lead Dev at Sollea AI