How to convert a Framer site to Astro

To convert a Framer site to Astro, you either rebuild it by hand in an empty Astro project or use a converter that reads the published site and writes the project for you. Deframer does the second: paste the site's address, pick Astro in the framework menu and convert for free. You get an Astro 7 project in TypeScript where every page is prerendered to static HTML and hydrates as one React island, with the site's animations, CMS content and forms carried over. Downloading the code needs proof that the site is yours.

Deframer is an independent tool and is not affiliated with, endorsed or sponsored by Framer. It converts sites you own, or sites whose owner has given you permission.

Why Astro for a Framer site?

Astro is a good fit when the site is mostly content: a marketing site, a portfolio, a blog. Its build writes every page to HTML ahead of time, so a visitor gets a finished document before any JavaScript runs, and the hosting side stays simple. Teams that already use Astro for docs or content sites also get one less framework to learn.

The trade-off is that a Framer page is not a set of small, independent widgets. Its layout, scroll effects, hover states and page transitions depend on one another. That is why the converted project keeps each page as a single React island instead of splitting it into many: the page renders as it was published, and the island stays mounted between pages, so a shared navigation keeps its state.

If your plan is to add app features such as accounts or a dashboard, read Next.js vs Astro for a converted Framer site before you pick.

What you need before you start

• The site's published address: a *.framer.website or *.framer.app address, or your custom domain. Not the editor link.
• A free Deframer account.
• The ability to publish the Framer site, or the owner's cooperation, so the verification tag can go live when you download.
• Node.js 22.18 or later on your machine, which the Astro project's server and scripts need.

Step by step

1. Paste the URL and pick Astro

Sign in, paste the published address into the convert form and open the framework menu. Next.js is selected by default; choose Astro. Then choose where assets live: Assets on Framer's CDN (the default, smaller download) keeps images, fonts and videos loading from Framer's CDN, while Assets in the project downloads them into public/ so nothing depends on Framer.

2. Convert

Click Convert. Progress shows live: queued, fetching, modules, converting, packaging, done. A conversion can run for up to 10 minutes, and converting costs nothing, including a conversion that fails.

3. Review the result

Read the notices on the result page. They point at files that couldn't be downloaded, components that render only in the browser, or redirects that weren't carried over. When live previews are on, the compare view shows the original and the conversion side by side at 1440, 768 and 390 pixels; previews may be paused, and you can always run the project locally instead.

4. Verify and download

Downloading asks you to show the site is yours. Deframer gives you a one-line meta tag; paste it at the end of the <head> in Framer's Site Settings, Custom Code, publish, and click Check again. A verified download uses 1 credit, or nothing with the lifetime deal. The full walkthrough is in verifying Framer site ownership.

5. Run it

npm install
npm run dev

npm run dev runs astro dev. Edit a view in src/views and the page updates.

6. Build and start

npm run build
npm start

astro build prerenders every page, CMS items included, and npm start runs the project's server.ts on Node.js 22.18 or later.

What's in the Astro project?

CMS detail pages take their titles and descriptions from a _head.json table, and the site's own head tags sit in src/site/head.ts. The pages, components and styles are the same React and TypeScript code the Next.js export uses; only the routes, the document and the server are Astro's.

How do animations and page transitions work?

Animations and interactions run on motion, the open-source animation library, through the project's kit. When you click a link, Astro's router loads the next page and keeps the island, so the layout template two pages share stays mounted. An open menu stays open, and a navigation bar collapsed on scroll stays collapsed. Page transitions play as the browser's view transitions.

What about forms?

Native Framer forms post to the project's own API routes in src/pages/api/forms/, with a rate limit, a honeypot and field checks. Copy .env.example to .env and set the webhook variables so submissions reach you; without one, they are only logged. More on mapping and testing in migrating Framer forms.

Where can an Astro export be hosted?

The pages are static HTML, but the project also runs server.ts on Node.js for redirects and forms. That means any Node.js host, a container or your own server: see self-hosting a Framer site with Docker or Render and Railway. If you want a site with no server at all, convert to Vite instead; the static export guide explains the differences.

What to check before launch

1. Open every route listed in the README, including CMS items and the 404 page.
2. Check three widths, roughly 1440, 768 and 390 pixels.
3. Click between pages that share a navigation and confirm it keeps its state.
4. Submit each form with the webhook set.
5. Run npm run typecheck, which runs astro sync and checks the project with TypeScript.
6. Confirm robots.txt, sitemap.xml and canonical URLs use your production domain.

Limits to know

The result is close to the original but not guaranteed to be identical, so check every page. Code components and third-party embeds come across as the site's own source, not rewritten. Very large sites may not fit in a conversion; keeping assets on Framer's CDN makes the project much smaller.