Migrate Your Webflow Site to Astro

Webflow is genuinely excellent design software. The visual editor, the CMS, the interactions panel — it is one of the best tools ever built for designing websites without writing code. If you are reading this, you probably already know that.

But you are also probably here because something changed. Maybe your Webflow bill crept past $500/year. Maybe you tried to hand the site to a developer and they could not do anything with the exported code. Maybe you want AI agents to maintain your site and realized they cannot interact with a visual canvas. Whatever the reason, you are looking at Astro, and you are wondering how hard the migration actually is.

This guide covers every realistic approach, the Webflow-specific gotchas you will run into, and how Astro’s architecture maps onto the site you already have.

Why Astro specifically

Astro is a web framework purpose-built for content-driven websites — exactly what most Webflow sites are. Marketing pages, blogs, portfolios, documentation sites, agency showcases. Astro was designed for these use cases from day one.

What makes it a natural migration target from Webflow:

Zero JavaScript by default. Astro ships pure HTML and CSS unless you explicitly add interactive components. This is why Astro sites consistently score 95-100 on Lighthouse mobile, compared to the 70-85 range typical for Webflow sites (Webflow loads its interaction engine, font loader, and analytics script on every page).

Content collections with type safety. Astro has a built-in content layer that maps remarkably well onto Webflow CMS collections. You define a schema (similar to how you define CMS collection fields in Webflow), write content in Markdown or MDX files, and Astro validates everything at build time. No runtime database, no API calls, no CMS subscription.

Island architecture. Need a React contact form on an otherwise static page? Astro lets you hydrate just that component while the rest of the page stays as zero-JS HTML. This is the best of both worlds — Webflow’s static output model with the ability to add real interactivity where you need it.

Framework agnostic. Astro components can use React, Vue, Svelte, or Solid. If your team already knows React, you can use React components inside Astro pages. You are not locked into a single UI library.

Free hosting everywhere. Cloudflare Pages (unlimited bandwidth), Vercel, Netlify, GitHub Pages — all have generous free tiers for static sites. After migration, your hosting bill drops to $0/month.

Astro has over 55,000 GitHub stars and was acquired by Cloudflare in January 2026. It is not a niche tool — it is the most popular framework for the exact category of sites that Webflow serves.

Understanding what you are migrating

Before picking an approach, you need to understand how Webflow stores your site versus how Astro expects it.

Webflow’s content model

Webflow keeps everything in a proprietary format inside their platform:

Pages are stored as a tree of visual elements in Webflow’s internal data model. They are not HTML files — they are JSON structures that Webflow renders into HTML at publish time.
CMS collections are database tables with typed fields (plain text, rich text, image, reference, multi-reference, color, etc.). Each collection item is a row. CMS content is only accessible through the Webflow Designer, the published site, or the Webflow API.
Styles use Webflow’s class system, which generates CSS with class names like w-layout-grid, w-richtext, and auto-generated combo classes. The generated CSS includes their entire framework, not just the styles your site uses.
Interactions are stored as JSON configuration that Webflow’s proprietary JavaScript engine interprets at runtime. They are not CSS animations — they are instructions for Webflow’s webflow.js library.
Assets (images, videos, documents) are hosted on Webflow’s CDN with their own URL structure.

How Astro stores the same content

my-site/
  src/
    pages/
      index.astro              # Homepage
      about.astro              # Static pages
      blog/
        [slug].astro           # Dynamic route for blog posts
    content/
      blog/
        my-first-post.md       # Blog post as Markdown
        another-post.md        # Each post is a file
      config.ts                # Collection schemas (like CMS field definitions)
    components/
      Header.astro             # Reusable components
      Footer.astro
      BlogCard.astro
    layouts/
      BaseLayout.astro         # Page wrapper with <head>, nav, footer
    styles/
      global.css               # Your actual CSS
  public/
    images/                    # Static assets
  astro.config.mjs             # Project configuration

The key mapping: Webflow CMS collections become Astro content collections. A Webflow blog collection with fields for title, slug, excerpt, body, author, and featured image becomes a folder of Markdown files where each file has YAML frontmatter (title, slug, excerpt, author, image) and the body is the Markdown content.

The div soup problem

Webflow does offer a code export feature. You might think you could export and convert to Astro. In practice, the export is nearly useless as a starting point:

The HTML is deeply nested <div> elements with proprietary class names that have no semantic meaning outside Webflow.
CMS content is completely stripped. Every dynamic page exports as an empty template.
The CSS file is Webflow’s entire framework, not just the styles your site uses.
Interactions export as JavaScript that depends on Webflow’s runtime engine.
Code export requires a paid Workspace plan ($19/month per seat) on top of your site plan.

Every migration approach below works from your published site or the Webflow API, not from the code export. The export is a dead end.

Migration approaches

1. AI coding agents (most flexible)

This is the approach that has gotten dramatically better in 2025-2026 and is now the most common way teams migrate marketing sites. You use an AI coding agent — Claude Code, Cursor, Windsurf, or Cline — to crawl your published Webflow site and rebuild it as an Astro project.

How it works step by step:

Set up the project. Create a new Astro project (npm create astro@latest) and open it in your AI editor of choice.
Give the agent your site URL. Tell the agent: “Crawl [your-site.webflow.io] and rebuild it as an Astro site. Extract all text content, download all images, and match the visual design using Tailwind CSS.”
The agent crawls and extracts. The agent visits each page, reads the rendered HTML (not Webflow’s source), extracts text content, identifies the page structure (hero sections, feature grids, testimonials, CTAs), and downloads images.
It builds components. The agent creates Astro components for repeated elements — headers, footers, card layouts, CTAs. It writes clean semantic HTML with Tailwind utility classes, not Webflow’s div soup.
It creates content collections. For CMS-driven pages (blog posts, case studies, team members), the agent creates Astro content collections with proper schemas and generates Markdown files for each item.
You iterate. The first pass will not be pixel-perfect. You review the output, ask the agent to adjust spacing, fix colors, refine responsive behavior. This iteration loop is where AI agents shine — you describe what is wrong in plain English, and the agent fixes it.

Real-world examples:

Lee Robinson documented migrating cursor.com from a headless CMS to a code-based site in 3 days, spending $260 in AI tokens. The site had dozens of pages and complex layouts.
Prefect.io rebuilt their entire marketing site for the “agent era” in about a week, a project they estimated would have taken 6 weeks with traditional development. They now ship new pages in 30 minutes instead of 2 weeks.

Cost: $0-$500 in AI API costs depending on site complexity and how many iterations you need. A typical 10-page Webflow marketing site takes 1-3 days.

Best for: Developers or teams with some technical ability who want full control over the output. Also the best approach if you want to restructure the site during migration rather than doing a 1:1 copy.

2. AI app builders (fastest for non-developers)

Tools like Bolt.new, v0.dev, Lovable, and Replit Agent let you build web applications through conversation. For a Webflow migration, the workflow is:

Screenshot each page of your Webflow site.
Paste the screenshots into Bolt.new or v0.dev.
Say: “Rebuild this page as an Astro component with Tailwind CSS.”
Iterate on the result through conversation.
Export the generated code to a GitHub repo.

These tools are improving fast and can produce surprisingly good results for standard marketing page layouts — hero sections, feature grids, pricing tables, testimonial carousels. They struggle more with complex custom designs or unusual layouts.

Cost: Most have free tiers with paid plans starting at $20-$50/month. You only need them during the migration period.

Best for: Non-developers, designers who want to migrate without hiring someone, or teams who want a quick prototype to refine later.

3. Hire a developer or agency

Many freelance developers and agencies now specialize in Webflow-to-code migrations, and most of them use AI tools to accelerate the work. What used to be a 4-8 week project can now be done in 1-2 weeks.

Freelancers on Upwork: $1,000-$5,000 for a typical marketing site migration. Search for “Webflow to Astro migration” or “Webflow to code migration.”
Specialized agencies: $5,000-$25,000 for larger sites with complex CMS structures, e-commerce, or membership features. Some agencies offer Webflow migration as a specific service.

Best for: Teams that want a polished result without managing the technical process. Also the best option if your Webflow site has complex features like e-commerce, membership areas, or extensive CMS relationships.

4. Automated migration tools

Several tools offer automated or semi-automated Webflow-to-code migration. BrowserCat Migrate is one option — paste your Webflow URL and AI agents extract your content, rebuild the site as Astro components, and deploy a preview. Other tools in this space include various Webflow-to-static-site converters and scraping-based migration services.

Best for: Teams that want a quick starting point without spending time on the initial extraction and scaffolding.

5. Webflow API extraction + manual build

If you are on a Webflow CMS plan, you can use the Webflow CMS API to programmatically extract your collection items. The API is read-only but gives you structured access to all your CMS data, including fields, images, and references between collections.

// Example: Extract all blog posts from Webflow CMS API
const response = await fetch(
  'https://api.webflow.com/v2/collections/{collection_id}/items',
  { headers: { 'Authorization': 'Bearer YOUR_API_TOKEN' } }
);
const { items } = await response.json();

// Convert each item to a Markdown file for Astro
for (const item of items) {
  const frontmatter = `---
title: "${item.fieldData.name}"
slug: "${item.fieldData.slug}"
date: "${item.fieldData['published-date']}"
image: "${item.fieldData['featured-image']?.url}"
---`;
  const content = `${frontmatter}\n\n${item.fieldData['post-body']}`;
  fs.writeFileSync(`src/content/blog/${item.fieldData.slug}.md`, content);
}

This is particularly useful for sites with large CMS collections (hundreds of blog posts, product listings, etc.) where manual copy-paste would be impractical.

Note: The API does not give you page designs, styles, or interactions. You still need to rebuild the visual design through one of the other approaches. The API solves the content extraction problem specifically.

6. Manual rebuild

The most labor-intensive but highest-control approach. Screenshot every page, scaffold a new Astro project, and rebuild from scratch using the screenshots as design references.

npm create astro@latest my-site — start with the blog or minimal template
Install Tailwind: npx astro add tailwind
Build your base layout (header, footer, page wrapper)
Recreate each page as an Astro component
Create content collections for CMS-driven content (define schemas in src/content/config.ts)
Copy text content from your published Webflow site
Download images from Webflow’s Assets panel or your published site
Deploy to Cloudflare Pages, Vercel, or Netlify

Cost: Your time. Typically 2-4 weeks for a developer working part-time on a marketing site.

Best for: Developers who want to learn Astro deeply, or situations where you want to significantly redesign the site during migration.

Webflow-specific gotchas

CMS content is the hardest part

Webflow’s CMS is genuinely useful, and extracting that content is the biggest migration challenge. Rich text fields contain formatted content with embedded images. Reference fields link collections together (blog posts to authors, products to categories). Multi-reference fields create many-to-many relationships.

In Astro, these translate to:

Rich text fields become Markdown content in your .md files.
Reference fields become frontmatter values that reference other collection items by slug.
Multi-reference fields become arrays of slugs in frontmatter.
Image fields become URLs or local file paths in frontmatter, with the actual images stored in public/images/.

If you have fewer than 50 CMS items, copy-paste is honestly fine. If you have hundreds, use the Webflow API or an automated extraction tool.

Interactions require rewriting

Webflow’s interaction system is powerful but entirely proprietary. There is no export path. Common patterns and how they translate:

Webflow interaction	Astro equivalent
Hover effects (scale, color change)	CSS `transition` + `:hover` pseudo-class
Scroll-triggered reveals	`IntersectionObserver` API + CSS `@keyframes`
Parallax scrolling	CSS `transform` with scroll event, or a library like Lenis
Page load animations	CSS `@keyframes` with `animation` property
Navbar scroll effects	Small `<script>` with scroll listener, toggling a CSS class
Lottie animations	The `lottie-web` library (same underlying technology)
Tabs and accordions	HTML `<details>` element or a small Astro island with React/Svelte

Most Webflow interactions are hover effects and scroll-triggered reveals, which translate cleanly to CSS. If your site has complex multi-step interactions with custom easing curves, budget extra time for this part.

Webflow’s class naming is not transferable

Webflow generates class names like hero-section, hero-section-2, div-block-47, and w-layout-grid. These names carry no semantic meaning outside the Webflow Designer. Do not try to preserve them. A clean migration means writing new class names (or using Tailwind utility classes) that actually describe the content.

Forms need a new backend

Webflow Forms is a built-in feature with no equivalent in static sites. You need a form handling service:

Formspree (free tier: 50 submissions/month)
Netlify Forms (free tier: 100 submissions/month, if hosting on Netlify)
Getform, Basin, or FormKeep (various free tiers)
Your own API endpoint if you have a backend

Webflow e-commerce and memberships are harder

If your Webflow site uses e-commerce or memberships, the migration is significantly more complex. These features require server-side logic that static Astro does not provide out of the box. Options include:

Snipcart or Shopify Lite for e-commerce on a static site
Astro + React islands with an auth provider like Clerk or Auth0 for membership features
Consider whether Next.js might be a better target if you need these features (see our Webflow to Next.js guide)

When you should NOT migrate

Be honest with yourself about these situations:

Your team is design-first and non-technical. Webflow’s visual editor is genuinely the best tool for designers who want to build without code. If nobody on your team writes code or wants to learn, Webflow is the right choice.
You change the design constantly. If you redesign pages weekly and need pixel-level visual control without touching code, Webflow’s canvas is faster than editing Astro templates.
You are an agency building client sites on Webflow. The agency model works well — you build on Webflow, hand the client a CMS they can use, and bill for maintenance. Migrating to code changes that workflow.
Your site uses Webflow e-commerce heavily. Migrating a full e-commerce site away from Webflow is a much larger project than migrating a marketing site. Make sure the ROI justifies the effort.

Life after migration: what changes

Content editing

Instead of logging into Webflow Designer, you edit Markdown files. For a blog post, you open src/content/blog/my-post.md in any text editor, VS Code, or even the GitHub web editor. You write in Markdown, commit, and the site rebuilds automatically.

If your team needs a visual CMS experience, you can add a headless CMS like Tina (which provides a visual editor for Markdown and MDX files in Git repos), Decap CMS, or Sanity. These give non-technical editors a familiar form-based interface while keeping your content in files you own.

Deployment

Most teams connect their GitHub repo to Cloudflare Pages, Vercel, or Netlify. Every push to main triggers an automatic build and deploy. You get deploy previews on pull requests — something Webflow charges extra for (staging is a paid feature).

AI-assisted maintenance

This is the biggest quality-of-life improvement. With your site as code in Git, AI agents can:

Write new blog posts from a brief
Update content across multiple pages
Add new sections or components
Fix bugs and accessibility issues
Optimize images and performance

None of this is possible with Webflow’s visual editor, which AI agents cannot interact with.

Cost comparison

	Webflow CMS (5 years)	Astro site (5 years)
Platform / hosting	$1,380-$2,340 (site plan)	$0 (free static hosting)
Workspace	$1,140+ ($19/seat/mo)	$0
Staging	$19/mo extra	$0 (deploy previews are free)
Migration	—	$0-$5,000 (one-time, depending on approach)
Total	$2,520-$3,500+	$0-$5,000 one-time

The break-even point is typically 1-2 years, after which the code-based site is free to run indefinitely.

Getting started

If you have a Webflow site and want to move to Astro, start here:

Inventory your site. Count your pages, CMS collections, collection items, and forms. This determines which migration approach fits best.
Check your CMS complexity. Simple blogs with one collection are easy. Sites with 5+ collections and reference fields between them need more careful planning.
Decide your approach. For most teams, an AI coding agent (Claude Code or Cursor) is the best balance of speed, cost, and control. Non-developers should consider an AI app builder or hiring a developer.
Set up hosting first. Create a free Cloudflare Pages or Vercel project so you have somewhere to deploy from the start.
Migrate content before design. Get all your text content and images extracted first. The design can be rebuilt, but content extraction is the tedious part.

The migration is a one-time effort. Once your site is an Astro project in a Git repo, you own it permanently, you can host it for free, and every AI tool in the ecosystem can help you maintain it.