NEWAI-native design subscriptions are back
Book a call

Framer to Astro migration

Framer to Astro, without losing a URL

Move your Framer site into code you own: Astro pages, typed content and the same URLs. We did it to our own site first.

Plan your migrationWhat moves, what doesn’t
Typical timeline
Scoped after the URL inventory
Cost
Quoted after the URL inventory
SEO risk
Low if every URL is kept; the main risk is assets left on Framer’s CDN
Moves cleanly
CMS collections (CSV), page copy, images and files
Must be rebuilt
Every page and component, forms, effects, redirects

In short

Checked against Framer and Astro docs

Framer has no official one-click code export, so moving to Astro is a rebuild, not a conversion. We save the live HTML of every page as the source of truth, export each CMS collection to CSV, pull every image and file off Framer’s CDN, rebuild the pages as Astro components on a token-based design system and keep every URL exactly as it was. SEO tags are checked page by page before the domain moves.

Why teams move

Why teams leave Framer for code

  1. They want to own the site

    An Astro site is a repository you control: no per-site plan, no editor seats, hosting wherever you like. The content and design live in files you can read, diff and move.

  2. AI agents can edit it safely

    A codebase with a design system and typed content is something Claude, Cursor or Codex can change through pull requests, with review and history. Our own Astro site is edited this way.

  3. Pages get much lighter

    Astro ships HTML and only the JavaScript a page actually needs. Our homepage went from 54MB on first load in Framer to 2.67MB in Astro, measured on the staging build.

  4. The site outgrew the canvas

    Programmatic pages (comparisons, industries, migrations like this one), generated files like llms.txt and custom structured data are easier to run from data files than to keep in sync by hand.

Old vs new

Framer vs Astro, for this move

FramerAstro
Who owns the siteFramerHosted on Framer, per-site planAstroA repository you own, hosted anywhere
EditingFramerVisual canvas and CMSAstroCode, Markdown and typed data, or a headless CMS
Page weightFramerFramer runtime on every pageAstroHTML first, JavaScript only where needed
RedirectsFramerSite settings, wildcards supportedAstroHost redirect file (real 301s)
AI agentsFramerFramer’s built-in agentsAstroAny coding agent, through pull requests

Last updated

Astro vs Framer: the full comparison

What moves, what doesn’t

What comes across from Framer

Framer is a hosted builder, so very little moves as-is. Content does; the rest is rebuilt on purpose.

  • Content

    Page copy is taken from the saved HTML of every live page, copied verbatim. CMS items come over through CSV. Nothing is retyped from memory.

  • CMS

    Each collection is exported to CSV with Framer’s CMS Export plugin and becomes a content collection or typed data file in Astro. On our site that was 5 collections, plus case studies that were static pages.

  • SEO

    Titles, descriptions, canonicals and OG images are copied from the saved HTML, then structured data and the sitemap are generated from the content.

  • Forms

    Framer forms need a new home: a form service, your CRM or a booking embed. On our site the only “form” was a Cal.com embed, so there was no backend to rebuild.

  • Integrations

    Analytics, tag managers and embeds are added back in the layout, loaded lazily so they don’t slow the first paint. Cookie consent is set up before launch.

  • Animations

    Framer effects and code components are rebuilt in CSS or a small motion library. Shader effects can be ported from the live bundle; we did that for our liquid logo marks.

  • Media

    Every image and file on framerusercontent.com is downloaded and re-served from your own host, because those URLs stop working when the Framer plan ends. We moved 1,378 files.

Moves over
Exported, imported, then checked by hand
Partly
Some of it imports, the rest is redone
Rebuilt
Nothing to import, we rebuild it
Replaced
Swapped for the new platform’s equivalent

Content model

How Framer content maps to Astro

  1. CMS collection

    Items edited in Framer’s CMS panel, each with its fields, a slug and a page from the template.

    On Framer

    Content collection

    Markdown files in the repo, or a typed data file for short lists, all rendered by one template.

    On Astro

    What you get src/content/insights/*.md

    One file per item, validated by a schema at build time.

  2. Static page

    A page laid out on the Framer canvas, with its breakpoints, styles and SEO set in the page panel.

    On Framer

    An .astro page

    A page file built from shared section components, with its title, description and canonical in code.

    On Astro

    What you get src/pages/about-us.astro

  3. Framer components and effects

    Components, variants, scroll effects and code components that run inside Framer’s own runtime.

    On Framer

    Astro components and CSS

    Astro components and plain CSS, with a small motion library only where an effect needs script.

    On Astro

    What you get src/components/*.astro

  4. Images on Framer’s CDN

    Images, videos and files served from framerusercontent.com, which stop working when the plan ends.

    On Framer

    Your own host

    Files moved to the repo or a bucket you own, then sized and converted by Astro’s image pipeline.

    On Astro

    What you get public/assets/images/

  5. Redirects in site settings

    Old paths and their new targets, set in Framer’s site settings and served by Framer’s hosting.

    On Framer

    A host redirect file

    A plain text file deployed with the site, one rule per line with the 301 status written out.

    On Astro

    What you get public/_redirects

Process and timeline

How we move a Framer site to Astro

The order we used on designme.agency. Durations depend on page count and how many custom components the site has.

  1. Inventory every URL

    Before any code

    Crawl the live site and the Framer sitemap, list every URL by template, and give each one a route in the new project. Pages missing from the sitemap still count.

  2. Save the source

    Before any code

    Pull the raw HTML of every page, export each CMS collection to CSV and download every asset, mapped from its Framer URL to a local file.

  3. Design system first

    Build

    Turn Framer’s values into tokens (type, colour, spacing, light and dark), then build shared section components. Pages are assembled from those, not copied one by one.

  4. Parity, then improvements

    Build

    The first version matches the live site page for page, with the same copy. New pages and changes come after parity is signed off.

  5. SEO and redirect check

    Before launch

    Every page keeps its title, description, canonical and OG image. Any URL that has to change gets a real 301 at the host, not a meta refresh page. The sitemap only lists indexable pages.

  6. Switch the domain and watch

    Launch and after

    Point the domain at the new host early in the week, submit the sitemap, then watch 404s, indexing and rankings daily for the first weeks.

SEO safety

The pre-launch checklist for Framer to Astro

Rankings are lost in three ways: broken URLs, missing on-page signals and crawl problems. 4 stages, from the first crawl to the weeks after launch, close all three. Tick the checks as you go; your progress stays in this browser.

Stage 1 of 4

Before the build

Know every URL and where it goes before anything is designed.

Stage 2 of 4

During the build

Carry every on-page signal across, page by page.

Stage 3 of 4

Before launch

Real redirects and a clean path for crawlers, ready for the switch.

Stage 4 of 4

After launch

Watch what Google sees in the first weeks and fix it fast.

Free migration planner

Plan your Framer to Astro redirects

Enter your site to list every URL, see which keep their path on Astro and get the 301 redirect map.

What people worry about

What can go wrong, and what we do about it

  1. Assets still load from Framer’s CDN after launch

    Every asset is mapped and downloaded before the build, and the final site is searched for Framer URLs. It works on launch day and keeps working after the Framer plan is cancelled.

  2. Pages that aren’t in the sitemap get lost

    We crawl the site as well as reading the sitemap. Our own Framer sitemap was missing a page that the navigation linked to, and it’s in the new site.

  3. Visual drift from the Framer design

    Values snap to a token system, so small differences are expected. We compare screenshots of both sites page by page and fix anything that changes meaning, not just pixels.

  4. Heavy media slows the new site down

    Images go through responsive formats (AVIF and WebP), videos load only when they scroll into view, and anything over a few megabytes moves to object storage.

  5. The team can’t edit content any more

    Content lives in Markdown and typed data files, so a new page is a new file. Agree who edits what before launch; if non-technical editors need a UI, add a headless CMS.

When not to migrate

When to stay on Framer

  • Your marketing team edits the site every week on the canvas and nobody on the team works in code or with coding agents.

  • The site is a handful of pages and Framer’s plan cost is the only thing bothering you. The move costs more than years of the plan.

  • You need visual editing with no developer at all. Astro can get there with a headless CMS, but that adds a tool to run.

Not sure which side you’re on?

If one of these is you, staying on Framer is probably the better call. We’ll say so on the first call.

Book a call

Our own migration

This page runs on the migration it describes

designme.agency is moving from Framer to Astro. We ran the same method on it that we run for clients: inventory, same URLs, full export, parity first, then improvements.

Same homepage, before and after

Homepage first load

lighter on Astro than on Framer

Framer, live site
54MB
Astro, staging build
2.67MB
54MB ÷ 2.67MB
20.2x, 95% less

Shorter bar is better

Page weight20x lighter

Framerlive site

54MB

Astrostaging build

2.67MB
Requests3.2x fewer

Framerlive site

158

Astrostaging build

50

How we measured: the homepage at 1440px wide, first load, before any scrolling. Framer is the live designme.agency; Astro is our staging build of the same page. Page weight is everything the browser downloads; requests count every file it asks for. Times are approximate.

live URLs inventoried and kept
63
files moved off the old CDN
1,378
CMS collections exported
5

Honest scope: as of October 2026 the new site is built and the redirects, sitemap check and launch are the last steps. We’ll add real post-launch numbers here.

FAQ

Framer to Astro questions

Adrian

Moving from Framer to Astro?

Every URL mapped, the CMS rebuilt, SEO kept. We scope it on a 30-minute call.

Plan your migration
Can you export a Framer site as code?

Not in a way you can build on. Framer’s help center says it doesn’t offer HTML export for self-hosting, and there is no official one-click code export. So a move to Astro is a rebuild. What you can take with you is the content: CMS collections export to CSV with Framer’s CMS Export plugin, and the published pages and assets can be saved.

Will the URLs change?

They don’t have to. Astro lets you choose every route, so we keep the exact Framer paths, including the no-trailing-slash rule and odd slugs. A URL only changes if you decide it should, and then it gets a 301.

Why Astro and not Next.js?

For a marketing site, Astro ships plain HTML by default and only adds JavaScript where a component needs it, which keeps pages very light. Next.js is the better fit when the site shares code with a React app or needs logged-in, dynamic pages. We build both.

Who edits the site after the move?

Content lives in Markdown and data files, which developers and AI agents edit easily. If marketers need a visual editor, we connect a headless CMS. Decide this before the build, not after.

Do we lose Framer’s animations?

They’re rebuilt, not lost. CSS covers most entrance and hover effects, a small motion library covers the rest, and custom effects can be ported. We ported Framer’s liquid logo shader to our own Astro site.

Keep exploring

All migrations

Platform facts checked on . Platforms change their exports and limits; we recheck at the start of every project.

You've reached the end, so now…

Tell us what you’re building.

We’ll help you map the right scope, team, timeline, and next steps.

Book a call