Convert HTML and Markdown content directly to screenshots without needing a live URL. Perfect for email previews, invoices, generated content, and dynamic documents.
Instead of capturing a live website, you can convert HTML or Markdown content directly to screenshots. This is ideal for previewing generated content, creating visual representations of emails, invoices, reports, or any dynamically created HTML/Markdown.
When to use HTML/Markdown input?
Pass raw HTML content to be rendered and captured as a screenshot. The HTML will be rendered in a browser environment with full CSS support.
source_type: 'html'options.htmlconst html = `
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; padding: 40px; }
h1 { color: #635BFF; }
</style>
</head>
<body>
<h1>Hello from HTML!</h1>
<p>This HTML is rendered directly to a screenshot.</p>
</body>
</html>
`;
const response = await fetch('https://www.snapshotai.dev/api/v1/screenshots', {
method: 'POST',
headers: {
'Authorization': 'Bearer sk_live_YOUR_API_KEY',
'Content-Type': 'application/json',
},
body: JSON.stringify({
options: {
source_type: 'html',
html: html,
viewport_width: 800,
viewport_height: 600
}
})
});import requests
email_html = """
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; padding: 20px; background: #f5f5f5; }
.email-container {
max-width: 600px;
margin: 0 auto;
background: white;
border-radius: 8px;
padding: 30px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
h1 { color: #333; }
.button {
background: #635BFF;
color: white;
padding: 12px 24px;
text-decoration: none;
border-radius: 6px;
display: inline-block;
}
</style>
</head>
<body>
<div class="email-container">
<h1>Welcome to SnapshotAI!</h1>
<p>Thank you for signing up. Get started with your first screenshot:</p>
<a href="#" class="button">Get Started</a>
</div>
</body>
</html>
"""
response = requests.post(
'https://www.snapshotai.dev/api/v1/screenshots',
headers={
'Authorization': 'Bearer sk_live_YOUR_API_KEY',
'Content-Type': 'application/json'
},
json={
'options': {
'source_type': 'html',
'html': email_html,
'viewport_width': 650,
'viewport_height': 800,
'format': 'png'
}
}
)
print(f"Email preview screenshot: {response.json()['data']['id']}")Convert Markdown content to a styled HTML screenshot. Perfect for documentation previews, README thumbnails, or blog post previews.
source_type: 'markdown'options.markdownconst markdown = `
# API Documentation
## Quick Start
Install the SDK:
\`\`\`bash
npm install @snapshotai/sdk
\`\`\`
## Usage Example
\`\`\`javascript
const snapshot = new SnapshotAI(apiKey);
await snapshot.capture('https://example.com');
\`\`\`
## Features
- ✅ Fast screenshot capture
- ✅ 47+ device presets
- ✅ Full page support
`;
const response = await fetch('https://www.snapshotai.dev/api/v1/screenshots', {
method: 'POST',
headers: {
'Authorization': 'Bearer sk_live_YOUR_API_KEY',
'Content-Type': 'application/json',
},
body: JSON.stringify({
options: {
source_type: 'markdown',
markdown: markdown,
viewport_width: 800,
viewport_height: 1000
}
})
});Generate visual previews of email templates before sending. Test designs across different viewport sizes.
{
"options": {
"source_type": "html",
"html": "<html>...</html>",
"viewport_width": 600
}
}Convert invoice HTML to image format for PDFs, receipts, or visual records.
{
"options": {
"source_type": "html",
"html": "<invoice HTML>",
"format": "png"
}
}Create preview images for README files, documentation pages, or blog posts from Markdown.
{
"options": {
"source_type": "markdown",
"markdown": "# Docs..."
}
}Convert dynamically generated HTML (reports, certificates, cards) to images.
{
"options": {
"source_type": "html",
"html": "{{template}}"
}
}Full example of generating a professional invoice screenshot:
const invoiceHTML = `
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
padding: 40px;
background: white;
}
.invoice {
max-width: 800px;
margin: 0 auto;
}
.header {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 2px solid #635BFF;
}
.logo { font-size: 28px; font-weight: bold; color: #635BFF; }
.invoice-details { text-align: right; }
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th {
background: #f5f5f5;
padding: 12px;
text-align: left;
font-weight: 600;
}
td {
padding: 12px;
border-bottom: 1px solid #eee;
}
.total {
text-align: right;
font-size: 24px;
font-weight: bold;
color: #635BFF;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="invoice">
<div class="header">
<div>
<div class="logo">SnapshotAI</div>
<p>123 API Street<br>San Francisco, CA 94105</p>
</div>
<div class="invoice-details">
<h2>INVOICE</h2>
<p><strong>Invoice #:</strong> INV-001</p>
<p><strong>Date:</strong> Nov 5, 2025</p>
</div>
</div>
<table>
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Growth Plan - Monthly</td>
<td>1</td>
<td>$79.00</td>
<td>$79.00</td>
</tr>
<tr>
<td>Additional Screenshots</td>
<td>5,000</td>
<td>$0.01</td>
<td>$50.00</td>
</tr>
</tbody>
</table>
<div class="total">
Total: $129.00
</div>
</div>
</body>
</html>
`;
const response = await fetch('https://www.snapshotai.dev/api/v1/screenshots', {
method: 'POST',
headers: {
'Authorization': 'Bearer sk_live_YOUR_API_KEY',
'Content-Type': 'application/json',
},
body: JSON.stringify({
options: {
source_type: 'html',
html: invoiceHTML,
viewport_width: 900,
viewport_height: 1200,
format: 'png',
omit_background: false
}
})
});
const data = await response.json();
console.log('Invoice screenshot ready:', data.data.id);Include Complete HTML Structure
Always provide valid HTML with DOCTYPE, head, and body tags. Include all CSS inline or in style tags.
Set Appropriate Viewport Size
Match viewport dimensions to your content. Use 600-800px width for emails, 800-1000px for invoices.
Use Inline CSS or Style Tags
External stylesheets won't load. Include all CSS inline or in <style> tags within the HTML.
Escape Special Characters
Properly escape quotes and special characters in your HTML string to avoid JSON parsing errors.
Test with Delay if Needed
If fonts or resources need time to load, add delay: 1000 ms.
Our team can help you optimize your HTML/Markdown for the best screenshot results.