htmlnode.jsweb-crawlerfirecrawl

How can I use Firecrawl to crawl and take a screenshot of a webpage instead of using Playwright in Node.js?


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);


Solution

  • 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);