# Export from Webflow and connect the Data API

https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/export-webflow-connect-api

Export your Webflow site code and fetch collection data, pages, and component definitions from the Webflow Data API.

---

## Navigation

**Course:** [Migrating from Webflow to Sanity](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity) · [View as markdown](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity.md)

**Previous:** [Recognize Webflow's content modeling patterns](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/recognize-content-modeling-patterns) · **Next:** [Initialize Sanity and install the migration toolkit](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/initialize-sanity-migration-toolkit)

---

## Course Contents

1. [Introduction](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/introduction-to-webflow-migration)
2. [Audit your Webflow content](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/audit-webflow-content)
3. [Recognize Webflow's content modeling patterns](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/recognize-content-modeling-patterns)
4. **Export from Webflow and connect the Data API** *(current)*
5. [Initialize Sanity and install the migration toolkit](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/initialize-sanity-migration-toolkit)
6. [Map collections to Sanity document types](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/map-collections-to-schemas)
7. [Build a page builder with a sections array](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/page-builder-sections-array)
8. [Model custom-template pages as singletons](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/custom-template-singletons)
9. [Model navigation in Sanity](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/model-navigation)
10. [Create a siteSettings singleton](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/site-settings-singleton)
11. [Handle internal links in Portable Text](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/internal-links-portable-text)
12. [Fetch your collection items from the API](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/fetch-collection-items-api)
13. [Run the asset pre-upload pass](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/asset-pre-upload)
14. [Resolve reference fields from API data](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/resolve-reference-fields)
15. [Convert rich text to Portable Text](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/convert-rich-text-portable-text)
16. [Extract static page content using the page DOM API](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/extract-static-page-content)
17. [Import content with the two-pass pattern](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/two-pass-import)
18. [Validate your import in Studio](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/validate-import-studio)
19. [Set up forms, redirects, and sitemap](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/forms-redirects-sitemap)
20. [Set up draft mode and visual preview](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/draft-mode-visual-preview)
21. [Validate your import without a frontend](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/validate-migration)
22. [Launch checklist and DNS transfer](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/launch-checklist-dns)
23. [AI prompt library and resources](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/appendix-prompt-library-resources)

---

You need two things from Webflow: the code export and API access. The export shows you how content renders; the API gives you the actual data.



### Before you start



The scripts and prompts in this guide assume a few structural conventions common on professionally built Webflow sites. Where your site doesn't follow one, the discrepancy is called out inline at the point it matters.



- Paid Webflow plan — code export requires a Basic plan or higher. Free-plan sites can't export HTML.

- Semantic page structure — `outline-pages.js` looks for a `<main>` element, and the classification prompt and component inventory treat direct children of `<main>` tagged `<section>` as top-level blocks. Sites built by non-developers, or heavily customized ones, may use `<div>` throughout instead. The scripts fall back for this, but classification quality will vary.

- Webflow components for repeated sections — the component inventory and `extract-static-pages.js` expect repeated sections to be Webflow components, not manually duplicated `<div>` blocks. Duplicated divs won't show up in `components.json` and need a different extraction approach.

- A single Webflow site on the account — the fetch script uses `sites.sites[0]`, the first site the API returns. With multiple sites, check the console output confirms the right one.

- Webflow CDN assets at `uploads-ssl.webflow.com` — the asset scanner matches this domain. Older accounts may serve assets from `assets-global.website-files.com` instead. If `asset-map.json` comes back empty, check your HTML export for the real CDN domain and update the regex in `pre-upload-assets.js`.

- Standard export folder structure — `.html` files should sit directly inside `webflow/export/`. If your unzipped export nests them in a subfolder, move them up a level first.


### Export your Webflow site



In the Webflow Designer, go to Site Settings > Export Code and download the zip. Unzip it into `/webflow/export/` in your project — you'll get HTML, CSS, JS, and page templates.



If your site uses named components, also export the Dev Link output. It generates React component code that's useful for schema inference.



### Migration repo vs. frontend repo



You can complete Chapters 2 through 5 entirely in a repo with no Next.js app — just `/sanity/`, `/scripts/`, and `/webflow/`. The Studio, import scripts, and all content migration work run here. You don't need a frontend to import content.



Chapter 6 is where that split matters — some of the work applies to this migration repo now, some needs a separate frontend repo later. If you're building the frontend as a separate step or repo, generate the standalone artifacts now and hand them over once the frontend exists.



### Set up your project structure



Create a folder for the migration project. The scripts, API data, and exports all live here alongside your Sanity project:



```text
/webflow/export/              ← Webflow code export (unzip here, then move contents up so .html files sit directly in this folder, not inside a subfolder)
/webflow/api/                 ← API responses saved as JSON (created by scripts)
/sanity/                      ← your Sanity project (created in the next lesson)
/lib/
  sanity-client.js            ← shared Sanity client (imported by all scripts)
/scripts/
  fetch-webflow-data.js
  fetch-collection-items.js
  pre-upload-assets.js
  extract-static-pages.js
  outline-pages.js
  rich-text.js
  component-map.js
  resolve-refs.js
  import.js
.env                          ← environment variables (never commit this)
```

### Set up your environment variables



Create `.env` at the project root — this is where all credentials live, read by every script in the project:



```bash:.env
# .env

# Webflow
WEBFLOW_API_TOKEN=your_webflow_api_token_here
WEBFLOW_SITE_ID=your_webflow_site_id_here

# Sanity (fill in after running npm create sanity@latest in the next lesson)
SANITY_PROJECT_ID=
SANITY_DATASET=staging
SANITY_TOKEN=
```

Add `.env` to your `.gitignore` before committing anything. Open `.gitignore` (create it at the project root if it doesn't exist) and add:



```bash:.gitignore
.env
```

Scripts in this course read these values via process.env. On Node 20 or later, load the file with the built-in flag:



```bash
node --env-file=.env scripts/fetch-webflow-data.js
```

On Node 18, install `dotenv` and add `import 'dotenv/config'` at the top of each script instead.



### Connect the Webflow Data API



Generate an API token in your Webflow dashboard under Site Settings > Apps & Integrations > API Access. Enable read access for these scopes — the fetch script uses all of them:



- Sites — site metadata and ID resolution

- Pages — page list, slugs, SEO metadata

- CMS — collections and collection items

- Components — component definitions and configurable properties

- Custom Code — site-level and page-level script inventory

- Forms — field schemas and validation rules


Write access isn't needed for this step. Paste the generated token into `WEBFLOW_API_TOKEN` in your `.env` file.



Run the script below to fetch and save all Webflow API data to `/webflow/api/`. It resolves your site ID automatically, so you don't need to look it up first.



```javascript:scripts/fetch-webflow-data.js
import fs from 'fs'

const TOKEN = process.env.WEBFLOW_API_TOKEN
if (!TOKEN) {
  console.error('Set WEBFLOW_API_TOKEN before running this script.')
  process.exit(1)
}

const BASE = 'https://api.webflow.com/v2'

async function get(path) {
  const res = await fetch(`${BASE}${path}`, {
    headers: { Authorization: `Bearer ${TOKEN}`, Accept: 'application/json' }
  })
  if (!res.ok) throw new Error(`${res.status} ${res.statusText} — ${path}`)
  return res.json()
}

// Some endpoints (e.g. Custom Code) require Business/Enterprise plan.
// This wrapper skips them gracefully if the plan doesn't support them.
async function tryGet(path, filename) {
  try {
    const data = await get(path)
    save(filename, data)
  } catch (err) {
    if (err.message.startsWith('403')) {
      console.warn(`Skipped ${filename} — not available on your Webflow plan (${path})`)
    } else {
      throw err
    }
  }
}

function save(filename, data) {
  fs.mkdirSync('webflow/api', { recursive: true })
  fs.writeFileSync(`webflow/api/${filename}`, JSON.stringify(data, null, 2))
  console.log(`Saved webflow/api/${filename}`)
}

async function run() {
  // Fetch all sites and use the first one (or match by name if you have multiple)
  const sites = await get('/sites')
  save('sites.json', sites)

  const site = sites.sites[0] // If you have multiple Webflow sites, check the console output confirms the right one
  const siteId = site.id
  console.log(`Using site: ${site.displayName} (${siteId})`)

  // Pages — slugs, SEO meta, noIndex flags (your URL inventory)
  const pages = await get(`/sites/${siteId}/pages`)
  save('pages.json', pages)

  // CMS collections — field types, names, reference targets
  const collections = await get(`/sites/${siteId}/collections`)
  save('collections.json', collections)

  // Component definitions — names, configurable properties, usage locations
  const components = await get(`/sites/${siteId}/components`)
  save('components.json', components)

  // Forms — field types, labels, validation rules per form
  const forms = await get(`/sites/${siteId}/forms`)
  save('forms.json', forms)

  // Custom Code — requires Business or Enterprise plan; skipped gracefully on lower plans
  await tryGet(`/sites/${siteId}/custom_code`, 'custom-code-site.json')
  await tryGet(`/sites/${siteId}/custom_code/blocks`, 'custom-code-pages.json')

  // Redirects — requires Enterprise plan; skipped gracefully on lower plans
  await tryGet(`/sites/${siteId}/redirects`, 'redirects.json')

  // Print a summary of any endpoints that were skipped due to plan limits
  const skipped = []
  if (!fs.existsSync('webflow/api/custom-code-site.json')) skipped.push('custom-code-site.json (Business+ required)')
  if (!fs.existsSync('webflow/api/redirects.json')) skipped.push('redirects.json (Enterprise required)')
  if (skipped.length) {
    console.log('\n⚠ Skipped (plan limits):')
    skipped.forEach(s => console.log(`  - ${s}`))
    console.log('\nManual alternatives:')
    if (skipped.some(s => s.includes('custom-code'))) {
      console.log('  - Custom code: view source on live site or check Site Settings > Custom Code in Designer')
    }
    if (skipped.some(s => s.includes('redirects'))) {
      console.log('  - Redirects: Site Settings → SEO → 301 redirects → Export CSV')
    }
  }
}

run().catch(err => {
  console.error(err.message)
  process.exit(1)
})
```

Run it from the project root:



```bash
node --env-file=.env scripts/fetch-webflow-data.js
```

The pages list replaces any need to export an XML sitemap — it has every page slug, SEO title, meta description, and noIndex flag. Use it directly as your URL inventory.



Once content is imported into Sanity, use [Sanity's Content Agent](https://www.sanity.io/docs/content-agent) to backfill missing SEO data. Pages and collection items from Webflow often come through with thin or missing meta descriptions and image alt text — run Content Agent against the staging dataset before launch instead of filling gaps by hand.



The custom code endpoints give you a structured inventory of every script registered site-wide and per page — more reliable than parsing `<head>` sections out of the HTML export. If you see `Skipped custom-code-site.json` in the output, your Webflow plan doesn't include the Custom Code API — audit your scripts manually instead, through Site Settings > Custom Code and each page's custom code settings in the Designer.



### Create a shared Sanity client module



Every migration script needs the same Sanity client config. Create it once and import it everywhere:



```javascript:lib/sanity-client.js
import { createClient } from '@sanity/client'

export const client = createClient({
  projectId: process.env.SANITY_PROJECT_ID,
  dataset: process.env.SANITY_DATASET,
  token: process.env.SANITY_TOKEN,
  apiVersion: '2024-01-01',
  useCdn: false
})
```

Every script in this guide imports from this file: `import { client } from '../lib/sanity-client.js'`. Change the dataset or API version here, and it's the only file you touch.



Don't fetch CMS collection items yet — that happens in Chapter 4, after the schema is designed.



Next, you’ll initialize your Sanity project.



---

## Related Resources

- [Full course as markdown](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity.md)
- [All courses and lessons](https://www.sanity.io/learn/sitemap.md)
- [Complete content for LLMs](https://www.sanity.io/learn/llms-full.txt)

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://www.sanity.io/learn/resource/feedback

```json
{
  "path": "/learn/course/migrating-content-from-webflow-to-sanity/export-webflow-connect-api.md",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>