From fragile iframes to server-side PDFs: a rendering migration story with Playwright

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.

By Mohamed Amine Ben Mallessa — Lead Dev at Sollea AI The 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. Tech stack: Next.js 15 App Router, TypeScript, TanStack Query + FastAPI SQLAlchemy 2, PostgreSQL . Modern stack — but document rendering was the weak link. When we started, Photopea looked ideal: a free Photoshop clone, scriptable via JavaScript. In production, it turned into a maintenance sink: PSD files had to be publicly hosted with Access-Control-Allow-Origin: . A CORS requirement that the client's infrastructure couldn't meet. Exports traveled through a backend API route /photopea/exports . Network latency or timeouts could silently truncate exports. Everything went through the client's browser. No automated generation, no CI/CD pipeline. When a poster had rendering issues, nobody could tell if the problem was Photopea, the network, the PSD, or the code. Instead of a closed PSD, each poster format is an open HTML file versioned in the repo. Full control of layout, CSS, SVG. Headless Chromium via Playwright produces a perfect vector PDF and high-res PNG. Average time: 3.5 seconds per poster. Fully reproducible. The same HTML template serves both the live iframe preview AND the Playwright final render. Zero difference between preview and printed document. | Metric | Before Photopea | After HTML Engine | |---|---|---| | External dependencies | 2 Canva, Photopea | 1 Playwright | | License cost | $$$$ Canva Enterprise | $0 | | Render time | 30-60s network dependent | ~3.5s | | Server-side render | Impossible | PDF + PNG | | Reliability | Fragile | Robust | | Adding a template | Complex config | One folder + manifest | "Free" solutions with complex infrastructure often end up costing more than a simple solution you fully control. An HTML template isn't as powerful as a PSD — but it has three decisive advantages: it's readable, versionable, and reproducible. Thanks to Nassim Tarkhani for pushing this direction. This idea saved the project. Mohamed Amine Ben Mallessa — Lead Dev at Sollea AI 🔗 GitHub https://github.com/mohamed-amine-ben-mallessa | LinkedIn https://fr.linkedin.com/in/benmallessa Need help with your technical stack? Sollea AI specializes in custom automation and AI solutions. Sollea AI — Full-stack development, AI automation, custom solutions. 🔗 Sollea AI · Team led by Mohamed Amine Ben Mallessa — Lead Dev at Sollea AI