📖 Article original : GitHub Gist
Par Mohamed Amine Ben Mallessa — Lead Dev Sollea AI
Le produit qu'on a construit
Avec mon équipe chez Sollea AI, nous avons développé une plateforme SaaS de génération d'affiches événementielles pour un client du secteur de la formation. L'application complète — développée en Next.js 15 (frontend) et FastAPI (backend) — permet à des utilisateurs non techniques de remplir un formulaire et d'obtenir instantanément une affiche professionnelle prête à imprimer.
Le mur qu'on a rencontré
Le pipeline de rendu original reposait sur deux briques externes :
Canva Connect / Autofill : nécessitait un plan Enterprise à plusieurs milliers d'euros par an. Bloqué administrativement.
Photopea (alternative gratuite à Photoshop dans le navigateur) : fonctionnait en théorie, mais en pratique c'était un cauchemar technique :
- Chargement d'un PSD public dans un iframe — contraintes CORS impossibles à contourner proprement
- Ré-upload des exports vers le backend — fragilité réseau
- Artefacts bizarres dans le payload des tickets (valeurs
_photopea_preview_urlqui s'invitaient sans prévenir) - Aucun rendu côté serveur possible (tout passait par le navigateur du client)
- Pas d'injection de photos dans les mockups
Bref : deux impasses techniques, une équipe bloquée, un client qui attend.
L'idée de Nassim
C'est Nassim Tarkhani qui a eu l'intuition : et si on remplaçait ça par un simple template HTML versionné, rendu par Playwright ?
Un template HTML qu'on sert statiquement depuis le backend et qu'on pilote par postMessage. Le même fichier sert pour l'aperçu live dans le navigateur ET pour le rendu final PDF/PNG sur le serveur.
Cette idée paraît simple a posteriori. Mais c'est souvent le signe des meilleures solutions.
La solution
Le résultat, c'est un moteur de « render templates » qui tient dans 3 concepts :
-
Un template = un dossier
backend/templates/<slug>/avec untemplate.html+ unmanifest.json -
L'aperçu live = le frontend charge le template dans une iframe et lui envoie les données du formulaire par
postMessage - Le rendu final = Playwright (Chromium headless) ouvre le même template, injecte les données et exporte en PDF A4 vectoriel + PNG 300 dpi (~3,5 secondes)
Ajouter un nouveau format d'affiche ? Il suffit de déposer un dossier. Zéro code backend, zéro code frontend.
Ce qu'on a supprimé
- 132 lignes de code Canva OAuth (connexion, callback, refresh token)
- 243 lignes de renderer Photopea (iframe, script injection, gestion d'erreurs)
- 87 lignes de compositeur canvas (compensation des limitations Photopea)
- 33 lignes de route d'export Photopea
Résultat : ~500 lignes de code supprimées, 0 dépendance externe de design, des affiches générées 10× plus vite.
Pourquoi c'est important
Pas besoin de Canva Enterprise. Pas besoin de Photoshop. Pas besoin de SaaS payant. Un fichier HTML, un manifeste JSON, et Playwright.
L'open source a encore gagné.
Article original publié sur GitHub Gist.
Mohamed Amine Ben Mallessa — Lead Dev chez Sollea AI
🔗 GitHub | LinkedIn
Remerciements à **Nassim Tarkhani* pour l'idée et la review.*
opensource #playwright #htmltemplates #fastapi #nextjs #devops #solutions Techniques #innovation
💻 Vous avez un projet similaire ?
Sollea AI — Développement full-stack, automatisation IA, solutions sur mesure.
🔗 Sollea AI · GitHub · LinkedIn
Équipe dirigée par **Mohamed Amine Ben Mallessa* — Lead Dev Sollea AI*
Top comments (0)