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 br
π 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
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*
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes β full credit and traffic to the original publisher.