{"slug": "vector-pdf-and-300-dpi-png-generated-in-3-seconds-with-playwright-complete-guide", "title": "Vector PDF and 300 DPI PNG generated in 3 seconds with Playwright — Complete guide", "summary": "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.", "body_md": "*📖 Original article: GitHub Gist*\n\n**By Mohamed Amine Ben Mallessa — Lead Dev at Sollea AI**\n\nGenerate customized vector PDF posters and high-res PNG images server-side on the fly. No fat client, no browser UI, no paid SaaS.\n\nThe solution? Playwright (headless Chromium) + versioned HTML templates.\n\n```\nForm → HTML template + postMessage → Playwright headless → A4 vector PDF + 300 DPI PNG\n```\n\n**The template**: a self-contained HTML file with inline CSS and SVG. No external dependencies, no font loading, no network requests.\n\n**The render**: Playwright opens the template, injects data via JavaScript, exports as PDF (1 page, vector, A4) and PNG (300 DPI, 2480×3508px).\n\n**The speed**: ~3.5 seconds per document. Fully reproducible.\n\n| Tool | Reliability | Vector | Size | Ease of use |\n|---|---|---|---|---|\n| wkhtmltopdf | ⚠️ CSS issues | ✅ | ❌ Unmaintained | |\n| Puppeteer | ✅ | ✅ | ✅ | ⚠️ Heavy |\nPlaywright |\n✅✅ | ✅✅ | ✅✅ | ✅✅ |\n\nPlaywright handles fonts, viewport, headless mode natively, and integrates perfectly with FastAPI.\n\nOne HTML template = live preview in the browser AND final PDF/PNG render. No duplicate code, no preview/production divergence.\n\n`postMessage({ type: \"setState\", state: formData })`\n\n→ the template updates. Whether inside a frontend iframe or Playwright's headless Chromium.\n\n*Originally published on GitHub Gist.*\n\n**Mohamed Amine Ben Mallessa** — Lead Dev at Sollea AI\n\n🔗 [Sollea AI](https://sollea-ai.com) · [GitHub](https://github.com/mohamed-amine-ben-mallessa) · [LinkedIn](https://fr.linkedin.com/in/benmallessa)\n\n**Sollea AI** — Full-stack development, AI automation, custom solutions.\n\n🔗 ** Sollea AI** ·\n\n*Team led by **Mohamed Amine Ben Mallessa** — Lead Dev at Sollea AI*", "url": "https://wpnews.pro/news/vector-pdf-and-300-dpi-png-generated-in-3-seconds-with-playwright-complete-guide", "canonical_source": "https://dev.to/benmallessamohamedamine/vector-pdf-and-300-dpi-png-generated-in-3-seconds-with-playwright-complete-guide-4e56", "published_at": "2026-07-04 01:18:05+00:00", "updated_at": "2026-07-04 01:48:40.498533+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools"], "entities": ["Mohamed Amine Ben Mallessa", "Sollea AI", "Playwright", "Chromium", "FastAPI", "GitHub Gist"], "alternates": {"html": "https://wpnews.pro/news/vector-pdf-and-300-dpi-png-generated-in-3-seconds-with-playwright-complete-guide", "markdown": "https://wpnews.pro/news/vector-pdf-and-300-dpi-png-generated-in-3-seconds-with-playwright-complete-guide.md", "text": "https://wpnews.pro/news/vector-pdf-and-300-dpi-png-generated-in-3-seconds-with-playwright-complete-guide.txt", "jsonld": "https://wpnews.pro/news/vector-pdf-and-300-dpi-png-generated-in-3-seconds-with-playwright-complete-guide.jsonld"}}