📖 Original article: GitHub Gist
By Mohamed Amine Ben Mallessa — Lead Dev at Sollea AI
The product we built
My team at Sollea AI developed a SaaS platform for generating event posters. The full-stack application — Next.js 15 (frontend by Nassim Tarkhani) and FastAPI (backend by Nassim Tarkhani) — lets non-technical users fill a form and instantly get a print-ready professional poster.
The wall we hit
The original rendering pipeline depended on two external services:
Canva Connect / Autofill : required an Enterprise plan costing thousands per year.
Photopea (free browser-based Photoshop): worked in theory but was a technical nightmare:
- CORS issues with public PSD hosting
- Fragile export re-upload to backend
- Ghost values in ticket payload
- No server-side rendering possible
- No photo injection into mockups
Two dead ends.
The solution I built
I replaced the entire rendering pipeline with an HTML render template engine in 3 concepts:
-
A template = a
backend/templates/<slug>/folder withtemplate.html+manifest.json -
The live preview = the frontend loads the template in an iframe and sends form data via
postMessage - The final render = Playwright (headless Chromium) opens the same template and exports vector A4 PDF + 300 DPI PNG (~3.5 seconds)
Adding a new poster format? Just drop a folder. Zero backend code. Zero frontend code.
What we deleted
~500 lines of Canva/Photopea code removed. 0 external design dependencies. Posters generated 10× faster.
Why this matters
No Canva Enterprise. No Photoshop. No paid SaaS. An HTML file, a JSON manifest, and Playwright.
Open source wins again.
Originally published on GitHub Gist.
Mohamed Amine Ben Mallessa — Lead Dev at Sollea AI
🔗 GitHub | LinkedIn
Thanks to **Nassim Tarkhani* for the frontend and FastAPI backend development.*
opensource #playwright #htmltemplates #fastapi #nextjs #devops #pdfgeneration #innovation
💻 Have a similar project?
Sollea AI — Full-stack development, AI automation, custom solutions.
🔗 Sollea AI · GitHub · LinkedIn
Team led by **Mohamed Amine Ben Mallessa* — Lead Dev at Sollea AI*
Top comments (1)
That's a familiar migration path. We went through a similar process at my last company, moving our invoice generation from a template engine to fully rendered HTML for better control over complex layouts and branding. The shift from relying on external tools or even basic templating to a full headless browser stack really shines when you need pixel-perfect consistency and complex designs generated at scale, especially when dealing with dynamic data and user-specific elements. It provides a level of programmatic control that's hard to achieve otherwise.
One area we spent a fair bit of time on was font handling, both in terms of licensing for commercial fonts and ensuring they rendered identically across development, staging, and production environments. It's surprising how many subtle rendering differences can pop up with custom fonts or intricate CSS grid layouts when moving between different OS environments or even Playwright versions. Having a robust set of visual regression tests for the generated outputs became crucial, rather than just relying on functional tests of the data itself.
Optimizing the HTML/CSS for rendering speed in a headless browser can also be a significant factor when you're generating thousands of assets daily. We found that keeping the DOM as lean as possible and pre-loading common assets or fonts into the browser context where possible made a measurable difference. Long-term, managing a growing library of these HTML templates and their associated styles becomes a distinct front-end challenge in itself, requiring good componentization and a clear versioning strategy.