{"slug": "from-fragile-iframes-to-server-side-pdfs-a-rendering-migration-story-with", "title": "From fragile iframes to server-side PDFs: a rendering migration story with Playwright", "summary": "Sollea AI migrated its poster rendering from a fragile iframe-based Photopea solution to a server-side HTML engine using Playwright, reducing render time from 30-60 seconds to 3.5 seconds and eliminating external dependencies. The new system uses versioned HTML templates for full control and reproducibility, with the same template serving both live preview and final PDF/PNG output.", "body_md": "**By Mohamed Amine Ben Mallessa — Lead Dev at Sollea AI**\n\nThe application we shipped generates customized posters from a simple web form. Users fill in their event details (dates, venue, times) and the app produces a print-ready document.\n\nTech stack: **Next.js 15** (App Router, TypeScript, TanStack Query) + **FastAPI** (SQLAlchemy 2, PostgreSQL). Modern stack — but document rendering was the weak link.\n\nWhen we started, Photopea looked ideal: a free Photoshop clone, scriptable via JavaScript. In production, it turned into a maintenance sink:\n\nPSD files had to be publicly hosted with `Access-Control-Allow-Origin: *`\n\n. A CORS requirement that the client's infrastructure couldn't meet.\n\nExports traveled through a backend API route (`/photopea/exports`\n\n). Network latency or timeouts could silently truncate exports.\n\nEverything went through the client's browser. No automated generation, no CI/CD pipeline.\n\nWhen a poster had rendering issues, nobody could tell if the problem was Photopea, the network, the PSD, or the code.\n\nInstead of a closed PSD, each poster format is an open HTML file versioned in the repo. Full control of layout, CSS, SVG.\n\nHeadless Chromium via Playwright produces a perfect vector PDF and high-res PNG. Average time: 3.5 seconds per poster. Fully reproducible.\n\nThe same HTML template serves both the live iframe preview AND the Playwright final render. **Zero difference between preview and printed document.**\n\n| Metric | Before (Photopea) | After (HTML Engine) |\n|---|---|---|\n| External dependencies | 2 (Canva, Photopea) | 1 (Playwright) |\n| License cost | $$$$ (Canva Enterprise) | $0 |\n| Render time | 30-60s (network dependent) | ~3.5s |\n| Server-side render | Impossible | PDF + PNG |\n| Reliability | Fragile | Robust |\n| Adding a template | Complex config | One folder + manifest |\n\n\"Free\" solutions with complex infrastructure often end up costing more than a simple solution you fully control.\n\nAn HTML template isn't as powerful as a PSD — but it has three decisive advantages: **it's readable, versionable, and reproducible.**\n\nThanks to **Nassim Tarkhani** for pushing this direction. This idea saved the project.\n\n**Mohamed Amine Ben Mallessa** — Lead Dev at Sollea AI\n\n🔗 [GitHub](https://github.com/mohamed-amine-ben-mallessa) | [LinkedIn](https://fr.linkedin.com/in/benmallessa)\n\n*Need help with your technical stack? Sollea AI specializes in custom automation and AI solutions.*\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/from-fragile-iframes-to-server-side-pdfs-a-rendering-migration-story-with", "canonical_source": "https://dev.to/benmallessamohamedamine/from-fragile-iframes-to-server-side-pdfs-a-rendering-migration-story-with-playwright-hhl", "published_at": "2026-07-04 01:07:09+00:00", "updated_at": "2026-07-04 01:48:58.880985+00:00", "lang": "en", "topics": ["developer-tools", "ai-products"], "entities": ["Sollea AI", "Mohamed Amine Ben Mallessa", "Playwright", "Next.js", "FastAPI", "Photopea", "Canva", "Nassim Tarkhani"], "alternates": {"html": "https://wpnews.pro/news/from-fragile-iframes-to-server-side-pdfs-a-rendering-migration-story-with", "markdown": "https://wpnews.pro/news/from-fragile-iframes-to-server-side-pdfs-a-rendering-migration-story-with.md", "text": "https://wpnews.pro/news/from-fragile-iframes-to-server-side-pdfs-a-rendering-migration-story-with.txt", "jsonld": "https://wpnews.pro/news/from-fragile-iframes-to-server-side-pdfs-a-rendering-migration-story-with.jsonld"}}