SvelteKit

Use Firecrawl with SvelteKit to scrape, search, and interact with web data in your Svelte application.

Prerequisites

• SvelteKit project
• A Firecrawl API key — get one free

Install the SDK

npm install @mendable/firecrawl-js

Add your API key to .env:

FIRECRAWL_API_KEY=fc-YOUR-API-KEY

Search the web

Create a form action in src/routes/search/+page.server.ts:

import Firecrawl from "@mendable/firecrawl-js";
import { FIRECRAWL_API_KEY } from "$env/static/private";

const firecrawl = new Firecrawl({ apiKey: FIRECRAWL_API_KEY });

export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const query = data.get("query") as string;
    const results = await firecrawl.search(query, { limit: 5 });
    return { results: (results.web || []).map((r) => ({ title: r.title, url: r.url })) };
  },
};

Wire it up in src/routes/search/+page.svelte:

<script>
  export let form;
</script>

<form method="POST">
  <input name="query" placeholder="Search the web..." />
  <button>Search</button>
</form>

{#if form?.results}
  {#each form.results as result}
    <div><a href={result.url}>{result.title}</a></div>
  {/each}
{/if}

Scrape a page

Fetch data in a load function at src/routes/scrape/+page.server.ts:

import Firecrawl from "@mendable/firecrawl-js";
import { FIRECRAWL_API_KEY } from "$env/static/private";

const firecrawl = new Firecrawl({ apiKey: FIRECRAWL_API_KEY });

export async function load({ url }) {
  const target = url.searchParams.get("url");
  if (!target) return { markdown: null };

  const result = await firecrawl.scrape(target);
  return { markdown: result.markdown };
}

Display it in src/routes/scrape/+page.svelte:

<script>
  export let data;
</script>

{#if data.markdown}
  <pre>{data.markdown}</pre>
{:else}
  <p>Pass ?url= to scrape a page</p>
{/if}

Interact with a page

Create a server endpoint at src/routes/api/interact/+server.ts:

import { json } from "@sveltejs/kit";
import Firecrawl from "@mendable/firecrawl-js";
import { FIRECRAWL_API_KEY } from "$env/static/private";

const firecrawl = new Firecrawl({ apiKey: FIRECRAWL_API_KEY });

export async function POST() {
  const result = await firecrawl.scrape("https://www.amazon.com", {
    formats: ["markdown"],
  });

  const scrapeId = result.metadata?.scrapeId;

  await firecrawl.interact(scrapeId, {
    prompt: "Search for iPhone 16 Pro Max",
  });

  const response = await firecrawl.interact(scrapeId, {
    prompt: "Click on the first result and tell me the price",
  });

  await firecrawl.stopInteraction(scrapeId);

  return json({ output: response.output });
}

Next steps

Scrape docs

All scrape options including formats, actions, and proxies

Search docs

Search the web and get full page content

Interact docs

Click, fill forms, and extract dynamic content

Node SDK reference

Full SDK reference with crawl, map, batch scrape, and more