Migrate Your Framer Site to Astro

Framer is one of the best visual design tools on the web. Its canvas editor, animation system, and component architecture produce genuinely beautiful websites. Designers love it for good reason.

But Framer has a problem that becomes impossible to ignore once your site matters to your business: there is no way out. Framer has the most complete vendor lock-in of any major website platform. From their own help center:

“Framer does not offer HTML exporting functionality for self-hosting. Framer sites are not static and therefore cannot be exported for self-hosting.”

No HTML export. No code export. No JSON dump. No API to pull your content. Your pages, your copy, your images, your CMS collections — everything lives exclusively inside Framer’s infrastructure. Even Webflow, for all its faults, offers a partial (if unusable) HTML export. Squarespace lets you export content as XML. WordPress has full database exports. Framer gives you nothing.

This guide covers how to migrate a Framer site to Astro — the most natural destination for marketing sites, blogs, and portfolios that were built in Framer. We will walk through every realistic migration approach, from AI-assisted rebuilds to hiring a developer to doing it yourself.

Why Astro is the natural landing spot for Framer sites

Most Framer sites are marketing pages: homepages, landing pages, about pages, portfolios, maybe a blog. These are content-driven sites where every visitor sees the same thing. That is exactly the use case Astro was designed for.

Astro ships zero JavaScript by default. Every page is pre-rendered to static HTML at build time and served from edge CDNs worldwide. When you need interactivity — a form, an animated section, a dynamic widget — you add it as an “island” using React, Svelte, Vue, or any other framework. The rest of the page stays as lightweight HTML.

This architecture is a direct upgrade from Framer’s approach. Framer renders every page using a React runtime that must load and execute before visitors see content. Framer’s SEO is better than Wix (it does server-render), but the client still downloads and hydrates a React application for what is fundamentally static content.

Here is how the two compare:

	Framer	Astro
Monthly cost	$15-$45/mo depending on plan	$0 (free hosting on Cloudflare, Vercel, Netlify)
Code export	None — total lock-in	You write and own every file
CMS	10 collections on Pro, 30 on Business	Unlimited content collections (free)
JavaScript shipped	React runtime on every page	Zero by default, islands where needed
Animation support	Visual editor (locked in)	CSS, `motion` library, View Transitions
Custom code	Limited Code Components	Full access — it is your codebase
Hosting options	Framer only	Any static host, any CDN
Lighthouse scores	70-90 typically	95-100 typically
AI agent editable	No — canvas is not scriptable	Yes — standard files in a Git repo

Understanding what makes Framer migrations unique

Before diving into approaches, it helps to understand why migrating from Framer is different from migrating from other platforms.

There is no data to export. With WordPress, you export your database. With Webflow, you export (messy) HTML. With Ghost, you get a JSON file. With Framer, the migration starts from zero. Your only source material is the published website itself — the rendered output that visitors see.

Framer renders with React. If you view the page source of a Framer site, you will often see a minimal HTML document with a React root element. The actual content is rendered client-side (though Framer does server-render for SEO). This means simple HTML scraping may miss content — you need a real browser to render the page and extract what is there.

Framer’s breakpoint system is proprietary. Framer uses its own responsive layout engine with specific breakpoints (desktop, tablet, mobile). These do not map directly to CSS media queries. The visual output at each breakpoint needs to be observed and reproduced using standard responsive CSS techniques like Tailwind’s breakpoint utilities.

CMS content is locked inside Framer’s database. If you have blog posts, case studies, team member pages, or any other collection-based content, there is no export. You will need to extract that content from the rendered pages.

The animation question: Framer Motion is open source

This is the single biggest concern people have about leaving Framer, and it has a surprisingly clean answer.

The animation engine that powers Framer’s visual editor is an open-source library called motion (formerly known as Framer Motion). It is one of the most popular animation libraries in the React ecosystem, used by thousands of projects that have nothing to do with Framer the product.

This means the exact same animation capabilities you used in Framer’s visual editor are available in your Astro project. The difference is that you write code instead of dragging keyframes on a timeline.

Here is a practical mapping of common Framer animations to their Astro equivalents:

Hover effects — These are the simplest to migrate. Framer’s hover scale, color change, and shadow effects translate directly to CSS transitions:

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}

Scroll-triggered reveals — Framer’s “animate on scroll” effects use IntersectionObserver under the hood. In Astro, you can do this with pure CSS and a small script, or use the motion library for spring physics:

<script>
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  }, { threshold: 0.1 });
  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
</script>

<style>
  .reveal { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }
</style>

Page transitions — Astro has built-in View Transitions that animate between pages with zero JavaScript overhead. This actually exceeds what Framer offers, since Astro’s transitions work across full page navigations.

Spring animations and complex sequences — For physics-based springs, staggered animations, or gesture-driven interactions, use the motion library in an Astro React island:

import { motion } from "motion/react"

export function AnimatedHero() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ type: "spring", stiffness: 100 }}
    >
      <h1>Your headline</h1>
    </motion.div>
  )
}

The key insight: simple animations (hover, scroll reveal, fade-in) are better as pure CSS in Astro because they require zero JavaScript. Complex animations (springs, gestures, orchestrated sequences) use the motion library in React islands. Either way, nothing is lost in the migration.

Approach 1: AI coding agents (the most common path)

The rise of AI coding agents has fundamentally changed what “migration” means. Instead of painstaking manual recreation, you point an AI agent at your published Framer site, describe what you want, and it rebuilds the site in Astro.

This is not theoretical. Companies like cursor.com rebuilt their entire marketing site from a design-tool-based workflow to code. Prefect.io migrated to Astro with AI assistance. Sid Bharath has written extensively about using Claude Code to rebuild production marketing sites from visual references.

How it works in practice

With Claude Code (terminal-based, most powerful):

Start a new Astro project: npm create astro@latest
Open Claude Code in the project directory
Tell it: “I’m migrating a site from Framer. Here’s the URL: [your-framer-site.com]. Visit the site, extract the content and visual structure from each page, and rebuild it as Astro components using Tailwind CSS. Match the design as closely as possible.”
Claude Code will use browser tools or fetch the pages, analyze the layout, extract text and image URLs, and generate Astro components
Review the output, request adjustments (“make the hero section taller,” “the nav should be sticky”), and iterate
Download your images from the Framer site and place them in the public/ directory

With Cursor or Windsurf (IDE-based, visual feedback):

Create your Astro project
Take full-page screenshots of every Framer page at desktop and mobile sizes
Open the project in Cursor or Windsurf
Paste screenshots into the chat: “Rebuild this page as an Astro component with Tailwind CSS. Here’s the page content: [paste text from the page]”
The agent generates components that match your visual design
Preview in the browser, adjust, iterate

With Cline (VS Code extension):

Same workflow as Cursor, but runs as a VS Code extension
Cline can autonomously browse your Framer site, extract content, and create files
Review and approve each step

What to expect

AI agents handle marketing site designs remarkably well. Framer’s clean, modern aesthetic — bold typography, generous whitespace, card layouts, gradient backgrounds — translates naturally to Tailwind CSS utility classes. A typical 5-page Framer marketing site can be rebuilt in a few hours of agent-assisted work.

Where agents need more guidance: exact spacing and sizing (Framer uses specific pixel values that may not match Tailwind defaults), complex multi-step animations, and responsive behavior at all breakpoints. Plan to spend time on polish and refinement after the initial generation.

Cost

AI coding agent subscriptions run $20-$50/month. Claude Code with the Claude API uses pay-per-token pricing. For a typical 5-10 page marketing site, the total API cost is usually under $20. If you already have a subscription to one of these tools, the marginal cost of the migration is essentially zero.

Approach 2: AI app builders (best for non-developers)

If you are not comfortable working in a terminal or code editor, AI app builders offer a more visual workflow.

Bolt.new — Open bolt.new, describe your site or paste screenshots, and it generates a full project in the browser. You can preview, edit, and deploy without touching a terminal. Bolt can generate Astro projects directly.

v0.dev (by Vercel) — Paste a screenshot of your Framer page, and v0 generates React or Next.js components that match the design. You can then integrate these into an Astro project using React islands, or use them in a Next.js project directly.

Lovable — Similar to Bolt, Lovable generates full applications from descriptions and screenshots. Better for sites that need backend functionality (forms, databases, auth).

Replit Agent — Describe your site to the Replit Agent and it builds, previews, and deploys it within Replit’s environment. Good for quick prototyping, though you may want to move the code to your own repo afterward.

The workflow for all of these is similar: screenshot your Framer pages, paste them into the tool, describe what you want, and iterate on the output. The quality has improved dramatically, and for straightforward marketing sites, the results are often good enough to deploy with minor adjustments.

These tools typically cost $20-$30/month for their paid tiers. Some offer free tiers with limited usage.

Approach 3: Hire a developer or agency

Many designers who built their site in Framer choose to hire someone to “code it up.” This is an extremely common pattern, and there is a healthy market of freelancers and agencies who specialize in exactly this.

Freelance developers ($1,000-$5,000): Find someone on Upwork, Contra, or through your network. Share your Framer site URL and say “rebuild this in Astro.” A competent developer can recreate a 5-10 page marketing site in 1-2 weeks. The result is a clean codebase you own, hosted wherever you want.

Agencies ($5,000-$25,000): For larger sites with complex animations, CMS content, multiple languages, or specific performance requirements, an agency provides a more structured engagement. They will typically handle design refinement, development, content migration, QA, and deployment.

What to look for: Ask candidates to show you Astro projects they have built. Look for clean component architecture, responsive design, and proper use of Astro’s content collections for blog/CMS content. Ask them how they will handle your Framer animations — someone who mentions the motion library or CSS transitions is on the right track.

The Figma intermediary step: Some teams export their Framer designs to Figma first (by manually recreating them, since Framer does not export to Figma either), then hand the Figma files to a developer. This adds time but gives the developer precise design specs.

Approach 4: Automated migration tools

A few services offer automated Framer-to-code migration. BrowserCat Migrate crawls your published Framer site with a real browser, extracts content and structure, and rebuilds it as an Astro codebase deployed to a live preview. It handles CMS content, images, and animation translation. This is the fastest path if you want to skip the manual work, though you will likely want to polish the output.

The broader category of visual-to-code tools is still emerging. Because Framer offers no export API, all automated approaches work the same way: render the published site in a browser, extract what is visible, and rebuild it in code. The quality depends on the complexity of your site.

Approach 5: Manual DIY rebuild

The most time-consuming approach, but it gives you complete control over every detail.

Audit your Framer site. List every page, every CMS collection, every animation, every interaction. Screenshot everything at desktop, tablet, and mobile sizes. Copy all text content into a document.
Set up your Astro project. npm create astro@latest, add Tailwind CSS, configure your preferred hosting. Set up content collections for any blog or CMS content.
Build the layout components. Start with the global elements: navigation, footer, page layout. Match the typography, colors, and spacing from your Framer site.
Recreate each page. Work through your screenshots page by page. Use Tailwind utilities to match the visual design. Build reusable components for repeated patterns (cards, feature sections, testimonial blocks).
Migrate CMS content. Create markdown files for each blog post, case study, or collection item. Copy the text, download the images, format everything.
Implement animations. Start with CSS transitions for simple effects. Add the motion library in React islands for complex animations. Use Astro View Transitions for page transitions.
Test and deploy. Check every page at every breakpoint. Verify all links, images, and forms work. Deploy to your chosen host.

For a 5-10 page marketing site, expect this to take 2-4 weeks of part-time work if you are comfortable with HTML, CSS, and basic JavaScript.

Migrating Framer CMS content to Astro content collections

Framer’s CMS gives you 10 collections on the Pro plan ($30/month) and 30 on the Business plan ($45/month). Astro’s built-in content collections are unlimited, free, and stored as markdown files in your Git repo.

The migration process for CMS content:

Visit each collection page on your published Framer site
Extract the content from each item (title, body, images, metadata)
Create a corresponding Astro content collection with a typed schema
Write each item as a markdown file with frontmatter

For example, a Framer blog post becomes:

---
title: "Your Blog Post Title"
date: 2025-06-15
author: "Your Name"
image: "./images/post-cover.jpg"
---

Your blog post content goes here, written in clean markdown.
No proprietary CMS. No collection limits. No monthly fee.

Astro validates your content against the schema at build time, catching errors before they reach production. And because everything is markdown in Git, AI coding agents can create, edit, and manage your content programmatically.

What to preserve from your Framer site

Before starting the migration, make sure you capture everything:

All text content from every page (including footer, nav, meta descriptions)
All images at the highest resolution available (right-click and save, or inspect the page source for original URLs)
Color palette and typography (inspect the computed styles in browser dev tools)
Animation details — what moves, when it moves, how it moves
Responsive behavior — how each section adapts at tablet and mobile sizes
CMS content — every item in every collection
SEO metadata — titles, descriptions, Open Graph images
Form configurations — where forms submit, what fields they include
Third-party integrations — analytics, chat widgets, email signup forms

When to stay on Framer

Not every Framer site needs to migrate. Framer is a genuinely good tool for certain situations:

Short-lived campaigns. If the site will only exist for a few months, Framer’s speed-to-publish is hard to beat.
Design prototyping. If you are testing ideas and the final production site will be built separately, Framer is excellent for rapid prototyping.
All-designer teams. If nobody on your team writes code and you have no interest in learning, Framer’s visual editor is a legitimate way to maintain a web presence.
Very simple sites. A single landing page that does not change often may not justify the effort of migration, especially if you are on the $15/month Mini plan.

The case for migration is strongest when the site is a long-term business asset, when you want AI agents to help maintain and improve it, when CMS limitations are blocking you, or when you are paying $30-$45/month for a site that could cost $0 to host.

The bottom line

Framer makes beautiful websites. Astro makes beautiful websites you own. The design quality does not have to change — only the underlying architecture. And with AI coding agents making the rebuild faster than ever, the migration is less daunting than it used to be.

The hardest part is starting. Pick the approach that fits your skills and budget, and work through it page by page. Your Framer design was good — it will be just as good in Astro, with better performance, zero hosting cost, and full code ownership.