SocialSplash
Génération d'images pour réseaux sociaux à la volée via des paramètres d'URL avec un éditeur de templates visuel.
Rôle
Conception et développement de l'API de génération d'images, de l'éditeur de templates et du pipeline de rendu.
Architecture
NuxtJS, NodeJS — génération d'images basée sur l'URL avec substitution de paramètres, cache de templates et rendu en moins de 100ms.
Résultats
SaaS en production avec tier gratuit, marketplace de templates et API utilisée par des développeurs web pour des images Open Graph dynamiques.
Contexte
SocialSplash est un SaaS qui génère des images pour réseaux sociaux à la volée. Au lieu de créer manuellement des images OG pour chaque page, les développeurs utilisent une seule URL avec des paramètres de requête pour générer dynamiquement des images avec des titres, couleurs et mises en page personnalisés.
Le défi principal était de construire un moteur de rendu suffisamment rapide pour servir des images en temps réel tout en supportant le redimensionnement dynamique du texte, des systèmes de couleurs avancés et un éditeur de templates visuel.
Objectifs et contraintes
- Générer des images à partir de paramètres d'URL en moins de 100ms
- Supporter un éditeur de templates visuel dans le navigateur (expérience Figma-like)
- Gérer le redimensionnement dynamique du texte pour du contenu de longueur variable
- Fournir des systèmes de variables de couleurs avancés pour la cohérence de marque
- Mettre en cache les images générées pour les requêtes suivantes (<10ms)
- Offrir un tier gratuit avec utilisation illimitée
Solution et architecture
Le pipeline de génération d'images accepte une URL de template et des paramètres de requête, substitue les valeurs dans le template et rend le résultat en image. Les templates sont créés via un éditeur navigateur qui gère les couches, blocs de texte et variables de couleur.
Le moteur de rendu traite les templates côté serveur avec un cache agressif. Les premiers rendus prennent moins de 100ms ; les réponses en cache reviennent en moins de 10ms.
L'éditeur de templates est un éditeur canvas complet construit en NodeJS, supportant le glisser-déposer, le redimensionnement du texte et la gestion des variables de couleur.
Décisions techniques
- URL comme interface : une seule URL génère des images infinies en changeant les paramètres de requête — pas de SDK nécessaire
- Rendu côté serveur avec cache : les images sont générées une fois et mises en cache pour un accès instantané ultérieur
- Redimensionnement dynamique du texte : mise à l'échelle automatique du texte quand le contenu de substitution dépasse les limites attendues
- Système de couleurs avancé : variables de couleur prédéfinies avec mappings de couleurs associées pour la cohérence de marque
- Éditeur de templates canvas : éditeur natif navigateur pour créer des templates sans outils de design externes