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

> Source: <https://dev.to/benmallessamohamedamine/vector-pdf-and-300-dpi-png-generated-in-3-seconds-with-playwright-complete-guide-4e56>
> Published: 2026-07-04 01:18:05+00:00

*📖 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*