SocialSplash

Context

SocialSplash is a SaaS that generates social media images on the fly. Instead of manually creating OG images for every page, developers use a single URL with query parameters to dynamically generate images with custom titles, colors, and layouts.

The main challenge was building a rendering engine fast enough to serve images in real-time while supporting dynamic text resizing, advanced color systems, and a visual template editor.

Goals and Constraints

• Generate images from URL query parameters in under 100ms
• Support a visual template editor in the browser (Figma-like experience)
• Handle dynamic text resizing for variable-length content
• Provide advanced color variable systems for brand consistency
• Cache generated images for subsequent requests (<10ms)
• Offer a free tier with unlimited usage

Solution and Architecture

The image generation pipeline accepts a template URL and query parameters, substitutes values into the template, and renders the result as an image. Templates are created using an in-browser editor that supports layers, text blocks, and color variables.

The rendering engine processes templates server-side with aggressive caching. First renders take under 100ms; cached responses return in under 10ms.

The template editor is a full canvas-based editor built with NodeJS, supporting drag-and-drop, text resizing, and color variable management.

Technical Decisions

• URL-as-interface: a single URL generates infinite images by changing query parameters — no SDK needed
• Server-side rendering with caching: images are generated once and cached for instant subsequent access
• Dynamic text resizing: automatic text scaling when replacement content exceeds expected bounds
• Advanced color system: predefined color variables with related color mappings for brand consistency
• Canvas-based template editor: browser-native editor for creating templates without external design tools