{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreigr2jg4tsfma6da2bm7vds5astw6rgo2f7rog5vswwssghrnow67a",
    "uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3mprxpm5smh32"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreig2t7yz74pszgbvwx5gex2nyb7f7i3yn2mebpyknz7noqksncmbh4"
    },
    "mimeType": "image/webp",
    "size": 85936
  },
  "path": "/benmallessamohamedamine/vector-pdf-and-300-dpi-png-generated-in-3-seconds-with-playwright-complete-guide-4e56",
  "publishedAt": "2026-07-04T01:18:05.000Z",
  "site": "https://dev.to",
  "tags": [
    "tutorial",
    "python",
    "opensource",
    "webdev",
    "GitHub Gist",
    "Sollea AI",
    "GitHub",
    "LinkedIn"
  ],
  "textContent": "_📖 Original article: GitHub Gist_\n\n**By Mohamed Amine Ben Mallessa — Lead Dev at Sollea AI**\n\n##  The challenge\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##  How it works\n\n\n    Form → 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##  Why it beats wkhtmltopdf or Puppeteer\n\nTool | Reliability | Vector | Size | Ease of use\n---|---|---|---|---\nwkhtmltopdf | ⚠️ CSS issues | ✅ PDF | ✅ | ❌ Unmaintained\nPuppeteer | ✅ | ✅ | ✅ | ⚠️ Heavy\n**Playwright** | ✅✅ | ✅✅ | ✅✅ | ✅✅\n\nPlaywright handles fonts, viewport, headless mode natively, and integrates perfectly with FastAPI.\n\n##  The trick\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 })` → the template updates. Whether inside a frontend iframe or Playwright's headless Chromium.\n\n##  What we gained\n\n  * Zero subscription cost (no Canva, no Adobe)\n  * 3.5s generation time\n  * Perfect vector PDF (no pixelation)\n  * Print-ready PNG\n  * Templates versioned in Git\n  * New format = one folder\n\n\n\n_Originally published on GitHub Gist._\n\n**Mohamed Amine Ben Mallessa** — Lead Dev at Sollea AI\n🔗 Sollea AI · GitHub · LinkedIn\n\n#  playwright #fastapi #pdfgeneration #htmltemplates #opensource #python #webdev\n\n##  💻 Have a similar project?\n\n**Sollea AI** — Full-stack development, AI automation, custom solutions.\n\n🔗 **Sollea AI** · **GitHub** · **LinkedIn**\n\n_Team led by **Mohamed Amine Ben Mallessa_ * — Lead Dev at Sollea AI*",
  "title": "Vector PDF and 300 DPI PNG generated in 3 seconds with Playwright — Complete guide"
}