HTML to Image API

HTML as an Image Template Engine

HTML and CSS are the most powerful layout engines available. Rather than learning a graphics library, use what you already know — HTML, CSS, and web fonts — to design images programmatically.

Common use cases for HTML-to-image conversion:

Social media cards — Dynamic OG images with article titles, author photos, and branding
Certificates — Event certificates, course completions, badges
Reports — Charts, dashboards, and data visualizations as shareable images
Email headers — Dynamic banner images for personalized email campaigns
Marketing materials — Promotional graphics with dynamic text and pricing

How It Works with SnapAPI

Host your HTML template at a URL, then screenshot it with SnapAPI. The process is simple:

Create an HTML template with dynamic data (title, author, date, etc.)
Serve it at a URL (your app server, or a temporary hosting service)
Call SnapAPI with that URL and desired dimensions
Receive a pixel-perfect PNG/JPEG image

// Serve a template route
app.get('/og-template', (req, res) => {
  const { title, author } = req.query;
  res.send(`<html>
    <body style="width:1200px;height:630px;background:#1a1a2e;color:white;
      font-family:system-ui;display:flex;flex-direction:column;justify-content:center;padding:60px">
      <h1 style="font-size:48px;margin:0">${title}</h1>
      <p style="font-size:24px;opacity:0.7;margin-top:20px">By ${author}</p>
    </body>
  </html>`);
});

// Then screenshot it
const imgRes = await fetch(
  `https://apisnap.dev/api/screenshot?url=${encodeURIComponent(
    'https://yourapp.com/og-template?title=My+Article&author=Jane'
  )}&width=1200&height=630&format=png`,
  { headers: { Authorization: `Bearer ${API_KEY}` } }
);

Convert HTML to Images Today

100 free conversions per month. No credit card required. Start generating images instantly.

Get Started Free

Design Tips for HTML Templates

When designing HTML templates for image generation:

Use fixed dimensions — Set explicit width/height on the body element matching your target output size
Inline all styles — Avoid external stylesheets that may not load in time. Inline CSS or use a <style> block.
Use web-safe fonts or Google Fonts — Load fonts from a CDN to ensure consistent rendering
Add a delay — Use delay=1000 to ensure fonts and images load before capture
Test at exact dimensions — Open your template in a browser at the exact pixel dimensions you'll capture

Advanced: Element Targeting

Use SnapAPI's selector parameter to screenshot just the template element, ignoring the rest of the page:

// Screenshot only the .og-card element
const url = 'https://yourapp.com/templates/social-card?id=123';
const ssRes = await fetch(
  `https://apisnap.dev/api/screenshot?url=${encodeURIComponent(url)}&selector=.og-card&format=png`,
  { headers: { Authorization: `Bearer ${API_KEY}` } }
);

Element targeting is perfect when your template page has navigation, sidebars, or other elements you don't want in the final image.

Frequently Asked Questions

Yes. Use Google Fonts or host fonts on your server. Add delay=1000-2000 to ensure fonts load before capture.

Viewport up to 3840x2160px. For larger images, use deviceScaleFactor=2 for 2x resolution.

Yes. Chromium renders SVG natively. Inline SVG or reference SVG files - both work perfectly.

1-2 seconds for simple templates. 3-5 seconds with external fonts/images. Use delay parameter for content that needs loading time.