Framer to Astro: how to move a Framer site without losing its design or rankings

The short answer

Framer's own help center says it "does not offer HTML export for self-hosting" (Framer Help). So moving from Framer to Astro is a rebuild, not an export. You capture the published site as a reference, rebuild each template as Astro components, move the CMS content into collections, recreate the motion you actually need and give every URL that changes a permanent redirect.

Done in that order, the new site can look the same, load less JavaScript and keep its rankings. Skip the capture or the redirect map and you end up with a redesign nobody asked for and a dip in search traffic.

Why teams move off Framer

Framer is a good tool for designing and publishing marketing sites quickly. The reasons to leave are usually practical rather than aesthetic:

• Hosting and ownership. A Framer site runs on Framer's servers. Teams that want the code in their own repository, on their own host or next to their own backend need a rebuild.
• Plan costs per site. On Framer's pricing page, checked on 12 October 2026, the Basic plan is USD 10 a month and the Pro plan, which adds site redirects, is USD 30 a month, both billed yearly. Localization is a paid add-on.
• Redirect limits. Framer redirects only work for paths within the same domain (Framer Help).
• Forms, data and integrations that need a real backend: a CRM, a booking system, gated content or anything that has to run on your own infrastructure.

If your marketing team builds and edits pages visually every week and the site does its job, staying on Framer can be the right call. A migration costs design and development time; it should buy something specific.

What we learned building a Framer capture tool

Dardo built an internal tool that captures a published Framer page, for a site you own, and turns it into a standalone reference file plus an Astro migration tracker with one row per thing to rebuild. Building it taught us where Framer sites hide their complexity:

• Assets live on Framer's CDN. Images, fonts and code load from framerusercontent.com and related domains. Responsive images request the same file at several widths (?width=512, ?width=1024), so the capture keeps one local file per image, the largest one.
• The JavaScript arrives in layers. Framer loads small modules that only re-export the real bundle, so a single pass misses code. The tool keeps re-scanning until no new module appears.
• CMS content is a separate file format. Framer CMS collections ship as .framercms files that the page fetches in byte ranges from the CDN. On an ordinary static host those requests return the whole file, and the module that builds their URLs points back at Framer.
• The runtime rewrites the page after it loads. Framer's React runtime hydrates the HTML and can re-insert elements you removed. The "Made in Framer" badge, for example, is hydrated into its own container.
• Forms depend on Framer. The captured forms have no HTML action; submissions only work through Framer's client runtime.
• SEO tags point at Framer. Unless they're rewritten, canonical and Open Graph URLs keep advertising the original Framer address.
• Motion is data. Appear effects are stored as JSON payloads in the page, so the tool records them along with every running animation's keyframes and timing.

The conclusion we drew: the export is evidence, not the deliverable. We never ship the captured HTML or Framer's runtime. They tell us exactly what to rebuild.

Framer to Astro, step by step

1. Inventory every URL. Start from the site's sitemap.xml, add every CMS page and pull the Pages report from Google Search Console for the longest range available. Note any redirects already set in Framer under Site Settings, Hosting.
2. Export what Framer allows. Framer says CMS content can be exported with plugins to formats such as CSV or JSON (Framer Help). Download every image and file, and check the licence of each font before self-hosting it.
3. Capture the published site as a reference. Record each template at every breakpoint, plus the timing of every animation you want to keep. Our tool captures pages at 1440, 810 and 390 pixels wide, then one pixel below, at and above every breakpoint it finds in the site's CSS.
4. Rebuild templates as Astro components. Move CMS collections into content collections or a headless CMS, images into astro:assets, and localized pages into Astro's i18n routing, one URL per language.
5. Recreate the motion that carries meaning. Most Framer effects become CSS transitions, keyframes or a small script. Respect prefers-reduced-motion. In one of our own Framer-to-Astro rebuilds, an 18-route site that wasn't a client project, 217 of 219 scroll and interaction states matched the original within a 1% pixel difference.
6. Give every form a real endpoint. Point each form at your own handler (a Cloudflare Worker, a form service or your CRM) and test delivery on staging.
7. Carry over search metadata. Titles, descriptions, Open Graph tags, structured data and a self-referencing canonical on every page, plus a fresh XML sitemap.
8. Redirect at the server, not in HTML. A static Astro build without an adapter turns configured redirects into meta-refresh pages that have no HTTP status code (Astro configuration reference). Set 1:1 301 redirects where the site is hosted, for example in a Cloudflare _redirects file or a Worker.
9. Launch, then watch. Switch DNS, keep the Framer project until the new site is verified, and follow Search Console's indexing and Pages reports for the next few weeks. Our website migration SEO checklist covers launch day and the 90 days after it.

What changes after the move

Keeping SEO intact

Google's guidance on site moves with URL changes applies here: map every old URL to its closest new equivalent, use permanent server-side redirects and keep them for at least a year. If the URLs stay identical, which a careful rebuild can often achieve, you only need to verify that the new pages carry the same content and metadata.

The Framer-specific trap is the leftover Framer address. Make sure no canonical, sitemap entry or Open Graph tag still names the old Framer URL, and that the Framer project is unpublished or redirected once the new site is live.

How Dardo runs a Framer migration

We run Framer moves as part of our website migration service: inventory, capture, a representative page rebuilt first and reviewed at agreed widths, then the rest of the templates, forms and redirects. The build itself is web development in Astro, and motion work is creative development. This site, dardo.studio, runs on Astro on Cloudflare Workers with its content in a headless CMS, which is the setup we use most often.

If you're weighing a move, send us the site and what you want to change. We'll tell you whether a rebuild is worth it before quoting one.