Input Sources

Pageshot supports three input sources for captures. Choose based on your use case:

URL - Capture live websites, web apps, or any public URL
HTML - Render custom HTML directly (ideal for generated content, email templates)
Markdown - Convert markdown to styled images (perfect for blog posts, docs)

Important

Only one input type allowed per request. Combining url, html, or markdown will result in a validation error.

URL Capture

Capture any publicly accessible webpage.

{
  "url": "https://example.com",
  "format": "png"
}

{
  "url": "https://example.com/pricing",
  "format": "png",
  "viewport": { "width": 1920, "height": 1080 },
  "full_page": true
}

{
  "url": "https://stripe.com/pricing",
  "format": "png",
  "selector": ".pricing-table",
  "viewport": { "width": 1440, "height": 900 }
}

Use cases

Perfect for: Website previews, social media cards, monitoring, competitor analysis, link previews, SEO tools

URL Requirements

Must use http:// or https:// scheme
Public URLs only (private IPs and localhost are blocked)
No credentials in the URL (use auth.basic_auth instead)
Maximum URL length: 2048 characters

HTML Render

Render custom HTML with full CSS support.

{
  "html": "<html><body><h1>Hello World</h1></body></html>",
  "format": "png"
}

{
  "html": "<!DOCTYPE html><html><head><style>body{font-family:Arial,sans-serif;background:#f0f0f0;padding:40px;margin:0}h1{color:#155eef;font-size:48px}</style></head><body><h1>Styled Content</h1><p>This renders with custom CSS</p></body></html>",
  "format": "png",
  "viewport": { "width": 800, "height": 600 }
}

{
  "html": "<!DOCTYPE html><html><head><style>table{width:100%;border-collapse:collapse}td{padding:12px;border:1px solid #ddd}</style></head><body><table><tr><td>Order #1234</td><td>$99.00</td></tr></table></body></html>",
  "format": "png",
  "viewport": { "width": 600, "height": 800 }
}

Use cases

Perfect for: Email template previews, custom certificates, dynamic graphics, receipts, invoices, badges, personalized images

HTML Tips

Include all CSS inline or in <style> tags
Use absolute URLs for external resources
Set appropriate viewport dimensions for your design
HTML content is base64-encoded if it contains special characters
Maximum HTML size: 2 MB

Markdown Render

Convert markdown to beautiful images with syntax highlighting.

{
  "markdown": "# Getting Started\n\n## Features\n- Fast\n- Reliable\n- Scalable",
  "format": "png"
}

{
  "markdown": "# API Example\n\n```javascript\nconst res = await fetch('https://api.example.com');\nconst data = await res.json();\n```",
  "format": "png",
  "viewport": { "width": 800, "height": 600 }
}

{
  "markdown": "# Product Launch\n\n![Banner](https://example.com/banner.png)\n\n## Key Features\n1. **Fast** - Lightning speed\n2. **Secure** - Bank-grade encryption\n3. **Scalable** - Handles millions",
  "format": "png",
  "viewport": { "width": 1000, "height": 800 }
}

Use cases

Perfect for: Blog post previews, documentation cards, social media posts, README previews, changelog images, tutorial snapshots

Markdown Support

Standard markdown syntax (CommonMark)
Syntax highlighting for code blocks (100+ languages)
Images via URL (must be publicly accessible)
Tables, lists, blockquotes
Maximum markdown size: 500 KB

Common Patterns

{
  "url": "https://yoursite.com/blog/post",
  "format": "png",
  "viewport": { "width": 1200, "height": 630 },
  "clip": { "x": 0, "y": 0, "width": 1200, "height": 630 },
  "response_type": "json",
  "storage": { "store": true }
}

Email Template Preview

{
  "html": "<!DOCTYPE html><html><!-- your email template --></html>",
  "format": "png",
  "viewport": { "width": 600, "height": 800 },
  "response_type": "binary"
}

Documentation Card

{
  "markdown": "# Getting Started\n\n```bash\nnpm install @yourapp/sdk\n```",
  "format": "png",
  "viewport": { "width": 800, "height": 400 }
}

Next Steps

Viewports and Devices - Control screen size
Full Page Capture - Capture entire page height
Response Types - Binary vs JSON output
Storage - Save and retrieve captures

Input Sources

On this page