Capture screenshots of JavaScript-heavy websites and SPAs. Wait for dynamic content to load before capturing.
Modern websites use JavaScript to render content dynamically. Our screenshot API automatically waits for JavaScript to execute and the DOM to be ready before capturing.
Wait a fixed amount of time before capturing. Useful when you know how long content takes to load.
{
"url": "https://example.com",
"options": {
"delay": 3000 // Wait 3 seconds
}
}Wait until a specific element appears on the page. More reliable than fixed delays.
{
"url": "https://example.com",
"options": {
"waitForSelector": "#content-loaded"
}
}Use both delay and selector for maximum reliability.
{
"url": "https://example.com",
"options": {
"delay": 2000,
"waitForSelector": ".dynamic-content"
}
}Wait for the root app element or a specific component to render.
waitForSelector: "#root" or "#app"Wait for images to load before capturing.
delay: 2000 // Give images time to loadWait for animations to complete.
delay: 1000 // Wait for CSS animationsWait for content loaded via API calls.
waitForSelector: ".loaded-data"const response = await fetch('https://snapshotai.dev/api/v1/screenshots', {
method: 'POST',
headers: {
'Authorization': 'Bearer YOUR_API_KEY',
'Content-Type': 'application/json'
},
body: JSON.stringify({
url: 'https://react-app.com',
options: {
delay: 3000,
waitForSelector: '#app',
viewport: {
width: 1920,
height: 1080
}
}
})
});
const data = await response.json();
console.log('Screenshot ID:', data.data.id);Use specific selectors
Target unique elements that indicate content is loaded
Avoid excessive delays
Keep delays under 30 seconds to prevent timeouts
Test your selectors
Verify selectors exist in the page before using them
Try increasing the delay or using a more specific selector:
delay: 5000, waitForSelector: ".content-ready"The selector doesn't exist or takes too long to appear. Check:
Combine multiple strategies:
delay: 2000, waitForSelector: ".all-content-loaded"