framer to astro

Framer to Astro or Next.js

Move off Framer, onto code you own

If only the designer can change the site, and nothing on it is code you can keep, I rebuild it as a codebase your team owns, keeping the design that works. Next.js or Astro is decided in the audit.

Fixed price from $5,000 typically 4–6 weeks 30 days of hypercare code in your name

Astro or Next.js, with Sanity, on Cloudflare or Vercel.

What actually migrates.

What you have What happens Why
Page layouts Rebuild Made again in the new codebase. The old version is a reference, not an import. Rebuilt from the rendered page and the design, because there is nothing to export. What this buys is that the structure gets decided rather than inherited.
CMS collections Move Comes across as it is. The content survives the move and the work is transporting it, not remaking it. Framer collections export as CSV, which carries the fields and loses the relationships between them. The model is designed on the far side and the rows are loaded into it.
Code components Reconfigure The same thing, set up again. Nothing is recreated, but it has to be pointed at the new site by hand. Already React, so the logic is more portable than anything built on the canvas. Each one is reviewed for its dependencies and either kept as a React island inside Astro or rewritten to fit the new frontend.
Effects and page transitions Rebuild Made again in the new codebase. The old version is a reference, not an import. Each one becomes a decision: written in CSS, written with a motion library, or dropped. The ones that existed because the canvas made them easy are usually dropped.
URLs Reconfigure The same thing, set up again. Nothing is recreated, but it has to be pointed at the new site by hand. Existing paths are inventoried and preserved wherever possible, and anything that has to change gets an explicit redirect rather than disappearing at launch. Framer addresses are usually clean already, which is the part most worth protecting.

What the canvas knew, written down.

The same section, at two widths

Desktop

3 across

Phone

1 across

One rule grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))

On the canvas each of these blocks was positioned at each breakpoint, one at a time. Here both arrangements come from the line underneath, and a seventh block obeys it without anybody opening anything.

Where this migration gets complicated.

  1. 01

    There is no frontend codebase to migrate

    Webflow hands over HTML, CSS and JavaScript, and WordPress hands over a database. Framer hands over the CMS as CSV and nothing else, so the front end is rebuilt from the rendered site rather than converted from a download. Budget for it as a build, not a conversion.

  2. 02

    Breakpoint behavior is per element, not per system

    Framer lets a designer set behavior on individual elements at each breakpoint, which is why the sites look right and why there is no stylesheet to read. The responsive rules have to be observed at each width and rewritten as a system, which takes longer than reading CSS would.

How the migration works.

  1. Audit

    Every page, collection and code component read off the live site, because there is no project file.

  2. Rebuild

    Layouts become components, per-element breakpoints become one responsive system, and the React components are ported or rewritten.

  3. Migrate

    Collections out as CSV into the new model, references reconnected, assets rehosted and every path kept.

  4. Hand over

    The repository, the migration map and documentation written for somebody who was not here.

What is included.

  • Design rebuild

    Rebuilt as components, not approximated.

  • Responsive development

    Desktop, tablet and mobile, built and checked.

  • CMS architecture

    Collections and fields mapped before build.

  • Content migration

    Migrated and checked against the source.

  • Asset migration

    Collected, compressed and rehosted.

  • Forms and integrations

    Tested through to the final record.

  • URL coverage

    Every known public address preserved or deliberately redirected.

  • Metadata and canonicals

    Preserved wherever possible.

  • Search footprint preservation

    URLs inventoried before and checked after.

  • Pre-launch QA

    Forms, templates and old URLs verified.

  • Post-launch support

    30 days of indexing and traffic checks included.

After those 30 days, Continuous development is the optional way to keep shipping: $1,000 a month for the Everbase Agent, or $3,500 a month for the Partner Program (human QA on every deploy and one active request at a time), pause or cancel any month.

Search visibility can move during a migration. The goal is to preserve what search engines already understand, and to catch what changed quickly after launch.

And it is yours at the end. The repository sits in your organization rather than mine, the handoff documentation is written for somebody who was not here, and nothing about the project requires me: another developer or your own team can operate it.

Leaving Framer does not have to mean handing every edit to a developer.

  1. 01

    Content Collections, in the repository

    For a team that publishes rarely and is happy in a pull request. The content is files beside the code, typed and checked at build time, with no service to pay for and nothing to keep running. It stops suiting you the day somebody outside engineering needs to publish without help.

  2. 02

    Sanity

    For a team that publishes regularly, or where the person writing is not the person deploying. Editors get a real interface, the model is explicit, and the site reads it at build time. It is another system to configure and pay for, and the modeling is the part that decides whether editors can work on their own.

  3. 03

    No CMS at all

    For a site whose pages change a few times a year. Everything lives in components, changes go through the same review as any other change, and there is no editorial layer to maintain. Honest for a small site, and the wrong answer the moment a blog is added.

Content Collections against a headless CMS, and how the choice is made.

A migration is not finished when the new site looks right.

  • 01 Codebase

    A codebase your team owns

    Components, routes and styles rebuilt deliberately, not cleaned up from exported markup.

    Verified by Repository and component structure

  • 02 Site

    Everything accounted for

    Collections, content, metadata and existing addresses checked against the source.

    Verified by Source inventory and migration checks

  • 03 Systems

    Handoffs that actually arrive

    Forms, analytics and CRM checked at their destination rather than at the button.

    Verified by Submissions, events and records

The migration is complete when these pass, not when the homepage looks right.

The figures above show the report's shape. Yours are counted from your own site.

See everything included in a migration

Built for people and agents to work on.

The important part is not that an agent can write code. It is that the project is structured well enough for its changes to be understood, reviewed and reversed.

  • Marketing

    Editor or AI assistant CMS Preview Publish

    On the headless CMS answer above. Choose content collections instead and this lane runs through the repository and the review with the developers, which is exactly why that decision comes before the rebuild rather than after it.

  • Developers

    Branch Components and routes Review Deploy

    The same workflow as any other repository, which is what makes a second developer able to pick it up.

  • Coding agents

    Project instructions Branch Review Deploy

    Coding agents use the same repository and review process as developers. Instructions explain the patterns; tests and a human review check the changes before release.

Next step

Let me plan your next step.

Send your site

I can scope a migration. Send a brief and I will reply by email with next steps.