DEV Community

Mohamed Amine Ben Mallessa
Mohamed Amine Ben Mallessa

Posted on • Originally published at gist.github.com

How to replace Canva and Photopea with an open-source HTML render engine using Playwright

#python #webdev #opensource #tutorial

📖 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:

  1. A template = a backend/templates/<slug>/ folder with template.html + manifest.json
  2. The live preview = the frontend loads the template in an iframe and sends form data via postMessage
  3. 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 (0)