How do you build image generation into your SaaS product?

Adding image generation to your SaaS product lets your users get automatically generated visuals, social cards, certificates, reports, or branded exports, without any manual design work on their end.

Common SaaS image generation features:

• Shareable cards: Users generate and share achievement cards, stat summaries, or invite graphics
• Export as image: Convert data views, dashboards, or reports into downloadable images
• Dynamic OG images: Every user profile, project, or page gets a unique social preview
• White-label templates: Customers upload their brand colors and logo; you generate branded assets
• Certificates and badges: Course platforms, fitness apps, or gamified products

Architecture:

User Action → Your Backend → Layerre API → CDN → User
     |                |              |
     v                v              v
(e.g. clicks   (sends template   (renders image,
 "Share")       ID + user data)   returns URL)

Implementation steps:

1. Design templates in Canva

Create the templates your users will need. Name layers for the dynamic fields (username, score, date, avatar, etc.).

2. Import into Layerre

Get your template IDs and layer names via the Layerre dashboard.

3. Integrate the API

javascript
// In your backend (Node.js example)
async function generateShareCard(user) {
  const templateId = process.env.LAYERRE_SHARE_CARD_TEMPLATE_ID;
  const response = await fetch(
    `https://api.layerre.com/v1/template/${templateId}/variant`,
    {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.LAYERRE_API_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        overrides: [
          { layer_id: 'USERNAME_LAYER_UUID', properties: { text: user.displayName } },
          { layer_id: 'AVATAR_LAYER_UUID', properties: { img_url: user.avatarUrl } },
          {
            layer_id: 'METRIC_LAYER_UUID',
            properties: { text: `${user.projectCount} projects` },
          },
          {
            layer_id: 'JOINED_LAYER_UUID',
            properties: { text: user.createdAt.toLocaleDateString() },
          },
        ],
        export_type: 'png',
      }),
    }
  );
  return response.json(); // { url, width, height, ... }
}

4. Serve to your users

• Cache the image URL in your database for repeated access
• Set cache headers or use a CDN for performance
• Regenerate when the underlying data changes

Performance considerations:

• Layerre's API is synchronous, responses typically return in 1-3 seconds
• For real-time user-facing generation, show a loading state while rendering
• For batch or background generation, use a job queue
• Cache aggressively, don't regenerate unless data has changed