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 | LinkedIn 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