Migrate Your Framer Site to Raw Code

You designed a beautiful website in Framer. You poured hours into the layout, the typography, the animations. It looks exactly the way you want. And none of it belongs to you.

That is not an exaggeration. Framer is built on React. It renders React components. But you cannot have the React code. You cannot export HTML. You cannot download your content as files. You cannot self-host. From Framer’s 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.”

Your website — the thing that represents your business, your portfolio, your brand — exists exclusively as data inside Framer’s proprietary system. If you stop paying, it disappears. If Framer changes their pricing, you have no leverage. If you want to move to a different platform, you start from scratch.

This guide is about the philosophy and practice of owning your website as source code, and how to get there from Framer.

Source code as a business asset

There is a fundamental difference between using a platform and owning an asset.

A Framer site is a rental. You pay monthly for the right to have your design served from Framer’s infrastructure. You cannot take the underlying work with you. You cannot hand it to a different developer. You cannot back it up locally. You cannot version it, branch it, or audit the history of changes. If Framer goes down, your site goes down. If Framer raises prices from $30 to $60 tomorrow, your options are to pay or to abandon everything and start over.

Source code is property. A website built as code in a Git repository is a file on your hard drive, a repo on your GitHub account, and a deployable artifact that works on any hosting provider. You can read every line. You can hand it to any developer in the world and they can work on it. You can deploy it to Cloudflare, Vercel, Netlify, AWS, or your own server. If your hosting provider raises prices, you move to a different one in five minutes.

This distinction matters more than most people realize until they experience the lock-in firsthand. It is the same reason businesses prefer to own their office rather than lease it, to own their equipment rather than rent it. The website is a business asset — and Framer is the only major platform that will not let you take it with you.

What Framer does well (and what you keep)

Let us be clear about what Framer is good at, because the goal of migration is to preserve the good parts while eliminating the dependency.

Framer’s visual editor is excellent. The canvas-based design experience, the component system, the animation timeline — these are genuinely well-built tools. Designers can go from concept to published site in an afternoon. For prototyping and rapid iteration, Framer is hard to beat.

Framer’s design quality is high. The templates, the default typography, the spacing system — Framer sites look polished. The design community on Framer produces consistently good work.

Framer’s animation system is powerful. Hover effects, scroll-triggered animations, page transitions, spring physics — the visual editor makes these accessible without writing code.

When you migrate to code, you keep all of this: the design, the layout, the animations, the visual identity. What changes is the underlying architecture. Instead of a proprietary platform, you have files you own.

The irony: Framer is built on open-source code

Here is something most Framer users do not realize: the animation engine that powers Framer’s visual editor is an open-source library called motion (formerly Framer Motion). It is one of the most popular animation libraries in the React ecosystem, with over 25,000 GitHub stars. Any developer can install it with npm install motion and use the exact same animation capabilities outside of Framer.

Framer the company built the animation library. Framer the product wraps it in a visual editor and charges you monthly. But the core technology is free and open source. When you migrate to code, you do not lose the animation capabilities — you use the same library directly.

This extends beyond animations. Framer uses React for rendering, CSS for styling, and standard web technologies under the hood. Every design you built in Framer can be expressed as standard HTML, CSS, and JavaScript. The visual editor is a convenience layer, not a proprietary rendering engine.

What a Framer site looks like as code

Your design, translated to a codebase you own:

my-site/
  src/
    pages/
      index.astro          # Your homepage, same design
      about.astro          # Clean semantic HTML
      services.astro       # Service pages
    content/
      blog/
        my-post.md         # CMS content as markdown (no collection limits)
        another-post.md    # Free, unlimited collections
    components/
      Hero.astro           # Hero section with CSS animations
      AnimatedCard.tsx      # motion library for complex animations
      NavBar.astro         # Navigation with responsive behavior
      Footer.astro         # Footer component
    styles/
      global.css           # Typography, colors, spacing
  public/
    images/                # All assets at full resolution
    fonts/                 # Custom fonts you control
  astro.config.mjs         # Build configuration
  tailwind.config.mjs      # Design system tokens
  package.json             # Dependencies -- no proprietary platform

Same design. Same animations. But now you can read every line, change anything, deploy anywhere, and hand the project to any developer in the world.

How to migrate: every realistic approach

Since Framer has zero export functionality, every migration approach involves rebuilding the site from the published output. The question is how much of that rebuild is automated versus manual.

1. AI coding agents (the most powerful approach)

AI coding agents have transformed what it means to “rebuild a website.” Instead of manually writing every line of code, you point an agent at your Framer site and collaborate with it to recreate the design in code.

Claude Code is a terminal-based agent that can browse your published Framer site, analyze the design, extract content, and generate an entire project. The workflow:

1. Create a new project directory and initialize it (Astro, Next.js, or plain HTML — your choice)
2. Open Claude Code and tell it: “Visit [your-site.framer.app] and rebuild it as clean code using Tailwind CSS. Match the design, extract all content, and recreate the animations.”
3. Claude Code fetches the pages, analyzes the layout and visual structure, extracts text and image URLs, and generates component files
4. You review, request changes (“the spacing in the hero is too tight,” “add a hover effect to the cards”), and iterate
5. Download images from your Framer site and add them to the project
6. Deploy

Cursor and Windsurf are IDE-based agents. The workflow is more visual:

1. Take full-page screenshots of every Framer page (desktop and mobile)
2. Open your project in Cursor or Windsurf
3. Paste screenshots into the agent chat with instructions: “Rebuild this page. Here is the text content: [paste text]”
4. The agent generates components that match the visual design
5. Preview in your browser, iterate, polish

Cline runs as a VS Code extension and can autonomously browse your Framer site, create files, and build the project step by step.

Real-world migrations using this approach are happening constantly. The AI agents are especially good at Framer’s typical aesthetic — clean sans-serif typography, card-based layouts, gradient backgrounds, generous whitespace. These patterns map directly to Tailwind CSS utility classes.

Time: Hours to a couple of days for a typical 5-10 page marketing site.
Cost: $20-50/month agent subscription, or pay-per-token API costs (usually under $20 for a full site).

2. AI app builders (for non-developers)

If you are not comfortable in a code editor, AI app builders provide a more visual workflow:

• Bolt.new — Describe your site or paste screenshots, and Bolt generates a full project in the browser. You can preview, edit, and deploy without touching a terminal.
• v0.dev — Vercel’s tool that generates React components from screenshots and descriptions. Good for generating individual sections that you then assemble.
• Lovable — Generates complete applications from descriptions. Good for sites that need forms, databases, or user authentication.
• Replit Agent — Builds and deploys within Replit’s cloud environment. Describe what you want, the agent builds it, and you get a live URL.

The workflow is similar across all of them: screenshot your Framer pages, paste or upload them, describe what you want, iterate. The output quality has improved significantly, and for standard marketing sites, the results are often deployable with minor adjustments.

Time: A few hours to a day.
Cost: $20-30/month for paid tiers. Some offer free usage.

3. Hire a developer or agency

The most hands-off approach. Share your Framer site URL with a developer and say “rebuild this as code I own.”

Freelancers ($1,000-$5,000): Platforms like Upwork, Contra, and Toptal have developers experienced with this exact workflow. Many have done Framer-to-code migrations before. A 5-10 page site typically takes 1-2 weeks. Ask to see their previous work, particularly Astro or Next.js projects.

Agencies ($5,000-$25,000): For larger, more complex sites. Agencies handle the full process: design extraction, development, content migration, animation implementation, responsive testing, SEO setup, and deployment. Worth it for sites with many pages, complex CMS structures, or precise design requirements.

What to ask for: Request that the developer deliver a Git repository with the complete source code, deployed to a hosting platform of your choice, with documentation on how to make content changes. Make sure the contract specifies that you own all the code produced.

4. Automated migration services

Services like BrowserCat Migrate automate the crawl-extract-rebuild pipeline. They render your published Framer site in a real browser, pull out the content and structure, and generate a deployable codebase. This is the fastest option if you want to skip manual work, though automated output typically needs some polish for pixel-perfect results.

5. Manual rebuild (full control)

The slowest approach, but you control every decision:

1. Document everything. Screenshot every page at every breakpoint. Copy all text content. Note every animation and interaction. List every CMS collection item. Record your color palette, fonts, and spacing values (use browser dev tools).

2. Choose your stack. Astro for marketing sites, Next.js for interactive apps, plain HTML/CSS for maximum simplicity. Set up the project with your preferred tools.

3. Build the design system first. Set up your colors, typography, spacing, and common components (buttons, cards, sections) before building individual pages. This is the foundation everything else builds on.

4. Recreate pages one by one. Work through your screenshots methodically. Start with the homepage, then inner pages. Get the desktop version right first, then adapt for mobile.

5. Migrate CMS content. Create markdown files for every blog post, case study, or collection item. No more collection limits.

6. Implement animations. CSS transitions for simple effects, the motion library for complex ones. Test on real devices.

7. Deploy and verify. Deploy to Cloudflare Pages, Vercel, Netlify, or any host. Test every page, link, form, and animation.

Time: 2-6 weeks depending on site complexity and your experience level.
Cost: $0 beyond your time.

The AI editing advantage

This is the part of the code ownership argument that gets stronger every month.

Framer’s visual canvas cannot be scripted. No AI agent can drag layers on Framer’s canvas, modify Framer’s CMS collections programmatically, or automate design changes. Every edit — even a text change — requires a human to open the Framer editor, find the element, and modify it manually.

Code is the opposite. AI coding agents like Claude Code, Cursor, and Windsurf can:

• Read your entire site structure and understand the architecture
• Make targeted edits to any page, section, or style based on natural language instructions
• Add entirely new pages and features
• Update blog posts and content
• Fix bugs, optimize images, improve performance
• Refactor components and clean up code
• Deploy changes automatically

When your site is code in a Git repo, you can say “add a testimonials section to the homepage with a carousel” and an AI agent builds it. You can say “update the pricing page to reflect the new tiers” and it makes the changes across all relevant files. You can say “improve the mobile navigation” and it redesigns the responsive menu.

This capability gap between Framer and code-based sites will only widen. AI tools are getting better at working with code every month. They are not getting better at working with proprietary visual editors.

The designer-developer gap

One of the real tensions in the Framer migration conversation is the gap between designers and developers.

Framer is beloved by designers because they can build and publish without writing code, without asking a developer for help, without learning Git or terminal commands. The visual editor speaks their language: layers, frames, auto-layout, hover states. A designer can go from concept to live URL in a single sitting.

Code requires a different skill set. Even with AI agents handling much of the implementation, someone needs to review the output, manage the Git repo, handle deployments, and debug issues. This is a real consideration, not a trivial one.

The honest answer is: if you are a solo designer with no interest in learning any development tools, and your site is simple enough for Framer’s limitations, Framer might still be the right choice for you. The lock-in trade-off may be worth the productivity gain.

But if you are a designer who wants to learn, the barrier has never been lower. AI coding agents can explain what every line of code does. They can make changes based on your visual descriptions. They can teach you Git basics in the context of your actual project. Many designers have made the transition, and the learning curve is getting shorter every year.

For teams with both designers and developers, the answer is clear: design in Figma (the industry-standard design tool), implement in code. The designer creates the vision, the developer (with AI assistance) implements it as a codebase the business owns.

Framer CMS vs code-based content

Framer’s CMS is functional but limited:

• Free plan: 1 CMS collection, 20 items per collection
• Mini plan ($15/mo): 2 collections, 100 items
• Pro plan ($30/mo): 10 collections, 1,000 items
• Business plan ($45/mo): 30 collections, 10,000 items

A code-based site using markdown files or a headless CMS has no limits. Create as many content types as you need. Store as many items as you want. No monthly fee for the privilege.

For blogs, portfolios, documentation, and other content-heavy sites, this alone can justify the migration. If you are paying $30-$45/month for Framer primarily because you need more CMS collections, a code-based site eliminates that cost entirely.

When to stay on Framer

Framer is the right tool when:

• You are prototyping a design and the final production site will be built separately
• You need a site live this afternoon and it does not need to last more than a few months
• Your entire team consists of designers with no developer access and no plans to change that
• The site is a single landing page on the $5/month free tier and the lock-in does not concern you

The bottom line

Owning your source code is not about being anti-Framer. Framer is a good design tool that produces good-looking websites. The question is whether you want to rent your website or own it.

When your website is code in a Git repository, you own an asset. You can deploy it anywhere, edit it with AI, hand it to any developer, back it up locally, and never worry about a platform disappearing or raising prices. The design stays the same. The animations stay the same. What changes is the power dynamic: you are no longer dependent on a single platform to keep your website online.

The migration takes effort — there is no sugar-coating that. Framer’s lack of any export makes the process harder than it should be. But the tools available today, especially AI coding agents, have made it faster and more accessible than ever. A site that would have taken weeks to manually rebuild can now be done in hours with the right agent.