Use Cases

Practical examples of what you can build with RendShot — OG images, social cards, reports, CI screenshots, and more.

RendShot turns HTML into images via API. Here are the most common things people build with it.

Generate unique Open Graph images for every blog post, product page, or user profile. When someone shares a link on Twitter/X, LinkedIn, or Slack, they see a rich preview instead of a blank card.

og-image.ts

const result = await client.renderImage({
  html: `
    <div style="display:flex;flex-direction:column;justify-content:center;
                padding:60px;width:1200px;height:630px;
                background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff">
      <p style="font-size:20px;color:#8b949e;margin:0">rendshot.ai/blog</p>
      <h1 style="font-size:56px;margin:16px 0">${post.title}</h1>
      <p style="font-size:24px;color:#c9d1d9">${post.author} · ${post.date}</p>
    </div>
  `,
  width: 1200,
  height: 630,
  deviceScale: 2,
  fonts: ['Inter'],
})

// Use result.url as your og:image meta tag

Why RendShot? You write the template once in HTML/CSS. Every new page gets a unique image automatically — no design tool, no manual export, no image CDN to manage.

Dynamic Email Images

Email clients have limited CSS support. Instead of fighting with inline styles, render complex layouts as images.

email-banner.ts

const banner = await client.renderImage({
  html: `
    <div style="width:600px;padding:40px;background:#f8f9fa;text-align:center">
      <h2 style="color:#1a1a2e">Welcome, ${user.name}!</h2>
      <p style="color:#6c757d;font-size:18px">Your account is ready.</p>
      <div style="margin-top:24px;padding:16px;background:#e8f5e9;border-radius:8px">
        <strong style="color:#2e7d32">Free plan: ${user.remaining} images left this month</strong>
      </div>
    </div>
  `,
  width: 600,
  height: 300,
  format: 'png',
})

// Embed in your email: <img src="${banner.url}" />

Automated Reports & Dashboards

Turn dashboard views or data summaries into shareable images for Slack, email digests, or PDF reports.

weekly-report.ts

const report = await client.renderImage({
  html: `
    <div style="padding:40px;width:800px;font-family:sans-serif">
      <h2>Weekly Report — ${weekLabel}</h2>
      <table style="width:100%;border-collapse:collapse;margin-top:20px">
        <tr style="background:#f0f0f0">
          <th style="padding:12px;text-align:left">Metric</th>
          <th style="padding:12px;text-align:right">Value</th>
          <th style="padding:12px;text-align:right">Change</th>
        </tr>
        ${metrics.map(m => `
          <tr style="border-bottom:1px solid #e0e0e0">
            <td style="padding:12px">${m.name}</td>
            <td style="padding:12px;text-align:right">${m.value}</td>
            <td style="padding:12px;text-align:right;color:${m.change > 0 ? '#2e7d32' : '#c62828'}">
              ${m.change > 0 ? '+' : ''}${m.change}%
            </td>
          </tr>
        `).join('')}
      </table>
    </div>
  `,
  width: 800,
  height: 600,
  deviceScale: 2,
})

// Post to Slack: await slack.chat.postMessage({ channel, blocks: [{ type: 'image', image_url: report.url }] })

CI/CD Visual Testing

Capture screenshots of your staging site in CI pipelines. Compare them across deploys to catch visual regressions.

ci-screenshot.sh

#!/bin/bash
# In your GitHub Actions / CI pipeline:

STAGING_URL="https://staging.example.com"
RESPONSE=$(curl -s -X POST https://api.rendshot.ai/v1/screenshot \
  -H "Authorization: Bearer $RENDSHOT_API_KEY" \
  -H "Content-Type: application/json" \
  -d "{\"url\": \"$STAGING_URL\", \"width\": 1440, \"height\": 900, \"fullPage\": true}")

echo "Screenshot: $(echo $RESPONSE | jq -r .url)"

visual-test.ts

// Screenshot multiple pages in your test suite
const pages = ['/home', '/pricing', '/docs', '/dashboard']

const screenshots = await Promise.all(
  pages.map(path =>
    client.screenshotUrl({
      url: `https://staging.example.com${path}`,
      width: 1440,
      height: 900,
      fullPage: true,
    })
  )
)

// screenshots[0].url, screenshots[1].url, ...

Personalized Marketing Assets

Generate unique images for each customer, campaign variant, or product configuration.

campaign.py

from rendshot import RendshotClient, RenderImageOptions

client = RendshotClient(api_key="rs_live_YOUR_KEY")

for user in users:
    result = client.render_image(RenderImageOptions(
        html=f'''
        <div style="width:1080px;height:1080px;display:flex;align-items:center;
                    justify-content:center;background:#1a1a2e;color:#fff;padding:60px">
          <div>
            <p style="font-size:24px;color:#8b949e">Exclusive offer for</p>
            <h1 style="font-size:64px;margin:16px 0">{user["name"]}</h1>
            <p style="font-size:32px;color:#6b8f5e">{user["discount"]}% off your next order</p>
          </div>
        </div>
        ''',
        width=1080,
        height=1080,
        device_scale=2,
        fonts=["Inter"],
    ))

    send_email(user["email"], image_url=result.url)

AI-Generated Visuals

Use the MCP Server to let AI assistants create images directly. Claude, Cursor, or your own agent can generate visual content without you writing rendering code.

Prompt to Claude with MCP

Create a social media card with the title "RendShot 2.0 is here",
subtitle "HTML to images in one API call", dark background,
1200x630 pixels.

The AI assistant calls generate_image through MCP and returns the hosted image URL.

Next Steps

Quickstart — Get your first image in 5 minutes
Concepts — Understand how rendering, storage, and security work
API Reference — Full parameter list and error codes