External Publication
Visit Post

Vector PDF and 300 DPI PNG generated in 3 seconds with Playwright โ€” Complete guide

DEV Community [Unofficial] July 4, 2026
Source

๐Ÿ“– 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*

Discussion in the ATmosphere

Loading comments...