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

Sollea AI lead developer Mohamed Amine Ben Mallessa created a solution to generate vector PDF posters and high-resolution PNG images server-side in about 3.5 seconds using Playwright and versioned HTML templates. The approach uses headless Chromium to render a self-contained HTML template with inline CSS and SVG, then exports as A4 vector PDF and 300 DPI PNG without external dependencies or paid services.

📖 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 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. | 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 https://sollea-ai.com · GitHub https://github.com/mohamed-amine-ben-mallessa · LinkedIn https://fr.linkedin.com/in/benmallessa Sollea AI — Full-stack development, AI automation, custom solutions. 🔗 Sollea AI · Team led by Mohamed Amine Ben Mallessa — Lead Dev at Sollea AI