How to Migrate Your Webflow CMS Content to Astro

The Content Is the Hard Part

Rebuilding a Webflow site's layout and components in Astro takes a few days. Migrating the CMS content? That's where the real complexity lives.

Webflow's CMS stores your content in a proprietary format that you can't directly export as clean, structured data. You have two paths out: the Webflow API or CSV export. Both have tradeoffs. This guide walks you through each approach and shows you how to land your content in Astro's content collections with proper schemas.

Step 1: Audit Your CMS Collections

Before extracting anything, map out what you have:

• How many collections? — Blog posts, case studies, team members, FAQ items, etc.
• What fields does each collection use? — Text, rich text, images, references to other collections, date, number, options
• How many items per collection? — This determines whether you'll hit Webflow API rate limits
• Are there reference fields? — A blog post that references an author, a case study that references a service category. These relationships need to be preserved.

Write this down. You'll need it when defining your Astro content schemas.

Step 2: Extract from Webflow

Option A: Webflow API (Recommended)

The Webflow API gives you structured JSON for every CMS item. It's the cleanest extraction method.

1. Generate an API token in your Webflow project settings (Site Settings > Apps & Integrations > API Access)
1. Find your Collection IDs — hit the /collections endpoint to list all collections
1. Paginate through items — the API returns 100 items per request, so you'll need to loop for larger collections
1. Save the JSON response to local files for processing

Here's the critical thing: Webflow's rich text fields come back as raw HTML, not markdown. You'll need to convert this to markdown or MDX for Astro's content collections. Libraries like turndown handle this conversion, but expect to hand-check the output — especially for embedded images, custom embeds, and complex formatting.

Option B: CSV Export

Webflow lets you export CMS collections as CSV files. This is simpler but lossy:

• Rich text fields export as raw HTML strings in CSV cells
• Image fields export as Webflow CDN URLs (which will eventually expire)
• Reference fields export as item IDs that you need to manually map
• Multi-image fields are comma-separated URLs in a single cell

We recommend the API approach for anything beyond a simple blog. The CSV approach works for small sites with simple content structures.

Step 3: Define Astro Content Schemas

This is where Astro shines. In your src/content/config.ts, you define schemas for each content collection using Zod. This gives you type safety, validation, and auto-completion for every piece of content.

For each Webflow CMS collection, create an Astro content collection with matching fields. Map Webflow field types to Zod schemas:

• Plain text → z.string()
• Rich text → body content (the markdown/MDX file itself)
• Image → z.string() (URL) or image() (for local images with optimized processing)
• Date → z.coerce.date()
• Number → z.number()
• Option/Select → z.enum(['option-a', 'option-b'])
• Reference → z.string() (slug of the referenced item)
• Boolean/Switch → z.boolean()

Step 4: Transform and Write Content Files

Now you write a transformation script. For each CMS item:

1. Convert Webflow field data to your Astro schema format
1. Convert rich text HTML to markdown using turndown or a similar library
1. Download images from Webflow CDN to your public/ or src/assets/ directory
1. Update image references in your markdown to point to local paths
1. Write the result as a .md or .mdx file with YAML frontmatter

This script is something we build fresh for every migration at MigrateLab because every site's content structure is different. AI tools like Claude Code are excellent at generating these transformation scripts — you describe the input format and the desired output, and it writes the conversion logic.

Step 5: Handle Images Properly

Images are the most commonly botched part of a content migration. Here's the process:

1. Download all images from Webflow CDN URLs to local storage. Don't skip this — Webflow CDN URLs can change or expire after you cancel your plan
1. Optimize images — run them through sharp or squoosh to generate WebP/AVIF versions. Astro's built-in image optimization (astro:assets) handles this automatically for images in src/assets/
1. Update all content references to use the new local image paths
1. Add alt text — if your Webflow images had alt text, make sure it transfers. If they didn't (common), this is a good time to add it

Step 6: Validate and Test

After importing, run astro build. Astro's content collection validation will catch:

• Missing required fields
• Wrong field types (string where number expected, etc.)
• Invalid enum values
• Broken image references

Fix any validation errors, then compare your Astro pages against the live Webflow site. Check every content type, not just one example. The edge cases — items with missing fields, rich text with unusual formatting, items with no image — are where things break.

Common Gotchas

• Webflow rich text classes — Webflow adds custom classes to rich text elements (w-richtext). Strip these during HTML-to-markdown conversion
• Responsive images — Webflow generates srcset markup that won't transfer. Let Astro's image component handle responsive sizing instead
• Embedded videos — these come through as iframes in rich text. You may want to convert them to a custom MDX component for better control
• Draft items — the Webflow API returns published items by default. If you have draft CMS items you want to keep, you need to set the live parameter to false

Need this done right? Content migration is the most time-consuming part of any platform move, and the part most likely to go wrong. MigrateLab handles the entire extraction, transformation, and validation pipeline so your content arrives in Astro clean, complete, and ready to publish.