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

📖 Article original : 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 — built with Next.js 15 (frontend) and FastAPI (backend) — 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. Blocked by procurement.

Photopea (free browser-based Photoshop alternative): worked in theory but was a technical nightmare:

  • Loading a public PSD in an iframe → impossible CORS issues
  • Re-uploading exports to the backend → network fragility
  • Ghost _photopea_preview_url values appearing in the ticket payload
  • No server-side rendering possible (everything went through the client's browser)
  • No photo injection into mockups

Two dead ends. A blocked team. A waiting client.

Nassim's insight

It was Nassim Tarkhani who had the intuition: what if we replaced all this with a simple versioned HTML template, rendered by Playwright?

A self-contained HTML file served statically from the backend, controlled via postMessage. The same file drives both the live iframe preview AND the server-side PDF/PNG rendering.

This sounds obvious in hindsight. That's usually the hallmark of the best solutions.

The solution

The render template engine fits 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, injects the data 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

  • 132 lines of Canva OAuth code (connect, callback, refresh)
  • 243 lines of Photopea renderer (iframe, script injection, error handling)
  • 87 lines of canvas compositor (working around Photopea's limitations)
  • 33 lines of Photopea export route

Result: ~500 lines deleted, 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

Special thanks to **Nassim Tarkhani* for the idea and the code review.*

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)