I'm currently using Playwright in Node.js to capture screenshots of webpages, but I'm exploring Firecrawl and wondering if it can handle screenshots directly.
Here is what my firecrawl looks like with just the html and markup:
import Firecrawl from '@mendable/firecrawl-js';
import 'dotenv/config'; // load .env
async function captureAndGenerate(url) {
const firecrawl = new Firecrawl({ apiKey: process.env.FIRECRAWL_API_KEY });
// 1. Scrape the page
const scraped = await firecrawl.scrape(url, { formats: ['html', 'markdown'] });
// Check if data exists
if (!scraped || !scraped.data) {
throw new Error('Firecrawl did not return data. Full response: ' + JSON.stringify(scraped));
}
const html = scraped.data.html;
const markdown = scraped.data.markdown;
console.log("✅ Scraping complete, HTML length:", html.length);
}
captureAndGenerate("https://example.com").catch(console.error);
I was able to get this done with this code:
import Firecrawl from '@mendable/firecrawl-js';
import 'dotenv/config'; // load .env
async function captureAndGenerate(url) {
const firecrawl = new Firecrawl({ apiKey: process.env.FIRECRAWL_API_KEY });
console.log("🔍 Scraping:", url);
// 1. Scrape the page
const scraped = await firecrawl.crawl(url, {
limit: 3,
scrapeOptions: {
formats: ['markdown', 'html', { type: "screenshot", fullPage: true, quality: 80 }],
}
});
// Check if data exists
if (!scraped || !scraped.data) {
throw new Error('Firecrawl did not return data. Full response: ' + JSON.stringify(scraped));
}
const html = scraped.data.html;
const markdown = scraped.data.markdown;
// console.log("✅ Scraping complete, HTML length:", html.length);
console.log("✅ Screenshot URL:", scraped.data[0].screenshot);
// Load screenshot (optional)
// const screenshotBuffer = fs.readFileSync('./screenshot.png');
}
captureAndGenerate("https://example.com").catch(console.error);