Vector PDF and 300 DPI PNG generated in 3 seconds with Playwright — Complete guide

📖 Original article: GitHub Gist

By Mohamed Amine Ben Mallessa — Lead Dev at Sollea AI

The challenge

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.

How it works

Form → HTML template + postMessage → Playwright headless → A4 vector PDF + 300 DPI PNG

Enter fullscreen mode Exit fullscreen mode

The template: a self-contained HTML file with inline CSS and SVG. No external dependencies, no font loading, 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.

Why it beats wkhtmltopdf or Puppeteer

Tool Reliability Vector Size Ease of use wkhtmltopdf ⚠️ CSS issues ✅ PDF ✅ ❌ Unmaintained Puppeteer ✅ ✅ ✅ ⚠️ Heavy Playwright ✅✅ ✅✅ ✅✅ ✅✅

Playwright handles fonts, viewport, headless mode natively, and integrates perfectly with FastAPI.

The trick

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.

What we gained

• Zero subscription cost (no Canva, no Adobe)
• 3.5s generation time
• Perfect vector PDF (no pixelation)
• Print-ready PNG
• Templates versioned in Git
• New format = one folder

Originally published on GitHub Gist.

Mohamed Amine Ben Mallessa — Lead Dev at Sollea AI
🔗 Sollea AI · GitHub · LinkedIn

playwright #fastapi #pdfgeneration #htmltemplates #opensource #python #webdev

💻 Have a similar project?

Sollea AI — Full-stack development, AI automation, custom solutions.

🔗 Sollea AI · GitHub · LinkedIn

Team led by **Mohamed Amine Ben Mallessa* — Lead Dev at Sollea AI*