How to capture website screenshots with the endpnt Screenshot API

Website screenshots are one of the most common needs in web development. Whether you're building a link preview system, monitoring tool, or social media automation, capturing pixel-perfect screenshots programmatically is essential.

Getting started

The endpnt Screenshot API makes it simple to capture any webpage as an image. Here's a basic example:

curl -X POST "https://screenshot.endpnt.dev/api/screenshot" \
  -H "x-api-key: ek_your_api_key_here" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com"
  }'

This returns a JSON response with the screenshot URL:

{
  "success": true,
  "data": {
    "imageUrl": "https://cdn.endpnt.dev/screenshots/abc123.png",
    "width": 1280,
    "height": 720,
    "format": "png",
    "fileSize": 245678
  },
  "meta": {
    "requestId": "req_abc123",
    "processingTime": 1245
  }
}

Full-page screenshots

By default, we capture the visible viewport (1280x720). To capture the entire page, set fullPage to true:

{
  "url": "https://example.com",
  "fullPage": true
}

Device emulation

Capture screenshots as they would appear on different devices:

{
  "url": "https://example.com",
  "device": "iPhone 12 Pro",
  "fullPage": true
}

Supported devices include:

• iPhone 12 Pro, iPhone 13 Pro, iPhone 14 Pro
• iPad, iPad Pro
• Samsung Galaxy S21, Pixel 5
• Desktop (1920x1080, 1280x720)

Dark mode support

Many websites now support dark mode. Capture screenshots in dark mode by setting the darkMode parameter:

{
  "url": "https://example.com",
  "darkMode": true
}

Element targeting

Sometimes you only want to capture a specific part of a page. Use CSS selectors to target specific elements:

{
  "url": "https://github.com/microsoft/vscode",
  "selector": ".Box-header",
  "padding": 20
}

Output formats

Choose from multiple output formats depending on your needs:

• PNG (default) — Best for UI screenshots, lossless
• JPEG — Smaller file sizes, good for photos
• WebP — Modern format, excellent compression
• PDF — Vector format, perfect for printing

{
  "url": "https://example.com",
  "format": "jpeg",
  "quality": 85
}

Best practices

Handling slow websites

Some websites load slowly or have dynamic content. Use the waitForparameter to wait for specific conditions:

{
  "url": "https://example.com",
  "waitFor": {
    "selector": "#main-content",
    "timeout": 10000
  }
}

Authentication and cookies

For pages that require authentication, you can pass custom headers and cookies:

{
  "url": "https://app.example.com/dashboard",
  "headers": {
    "Authorization": "Bearer your-token"
  },
  "cookies": [
    {
      "name": "session",
      "value": "abc123",
      "domain": "app.example.com"
    }
  ]
}

Performance optimization

For better performance, especially when taking many screenshots:

• Use blockAds: true to block ads and trackers
• Set blockMedia: true to skip images and videos
• Use cache: true for static pages

{
  "url": "https://example.com",
  "blockAds": true,
  "blockMedia": false,
  "cache": true
}

Error handling

Always handle potential errors in your code:

async function takeScreenshot(url) {
  try {
    const response = await fetch('https://screenshot.endpnt.dev/api/screenshot', {
      method: 'POST',
      headers: {
        'x-api-key': process.env.ENDPNT_API_KEY,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ url })
    });

    const result = await response.json();

    if (!result.success) {
      throw new Error(`Screenshot failed: ${result.error.message}`);
    }

    return result.data.imageUrl;
  } catch (error) {
    console.error('Screenshot error:', error);
    throw error;
  }
}

Common use cases

Social media previews

Generate Open Graph images for your blog posts or product pages:

{
  "url": "https://yourblog.com/post/amazing-article",
  "width": 1200,
  "height": 630,
  "format": "png"
}

Website monitoring

Take regular screenshots to monitor your website for visual changes:

{
  "url": "https://yourapp.com/pricing",
  "fullPage": true,
  "cache": false
}

PDF generation

Convert web pages to PDF for reports or archiving:

{
  "url": "https://example.com/report",
  "format": "pdf",
  "fullPage": true,
  "paperSize": "A4"
}

Rate limits and pricing

The Screenshot API is included in all endpnt.dev plans:

• Free tier: 100 screenshots/month
• Starter: 5,000 screenshots/month
• Pro: 25,000 screenshots/month
• Enterprise: Unlimited

Screenshots typically take 1-3 seconds to generate, depending on the complexity of the page and the parameters you specify.

Next steps

Ready to start taking screenshots? Get your API key and try the Screenshot API today. Check out the full documentation for more advanced features and examples.