Framer to code

Framer to Astro. Every page prerendered.

Q: Is the Astro project a static site?

Its pages are: astro build prerenders every one to HTML. The project also runs a small server.ts on Node.js 22.18 or later that applies the site's redirects, serves those pages and handles the form routes with Astro's Node adapter. For a static site with no server, pick Vite.

Q: Where do page titles and descriptions go?

In each page's index.astro head, or its _head.json table for CMS items; the site's own tags are in src/site/head.ts.

Paste your Framer site's address and get an Astro 7 project in TypeScript: every page prerendered to static HTML, hydrated as one React island with the same animations, interactions, CMS and forms. Moving between pages keeps the layout.

Pick Astro in the converter's framework menu. Free to convert.

What you get

An Astro project with one React island

Project structure

src/
  pages/          index.astro per URL beside its _route.tsx, API routes
  site/           document.astro, root.tsx, head.ts, routes, forms
  middleware.ts   The kit's server-inserted HTML
  views/          Pages, each with its .module.css
  layouts/        Layout templates: navigation and footer
  components/     Components, in the design project's folders
  styles/         Colour tokens, text styles, @font-face rules
  cms/            CMS collections: <collection>.ts + <collection>.json
  lib/deframer/   The small kit that replaces Framer's runtime
public/           robots.txt, sitemap.xml, assets kept in the project
astro.config.ts
server.ts         Redirects, prerendered pages, form routes

src/pages/**/index.astro: One per URL, with its metadata in its head; CMS items take theirs from a _head.json table.
src/site/document.astro: The document every page is rendered into; src/site/root.tsx wraps each page.
server.ts: Applies the site's redirects and URL forms (308), serves the prerendered pages and runs Astro's Node handler for the form routes.
src/pages/api/forms/<form>.ts: One API route per native form.

Run and deploy

Unzip, install, run. Nothing from Framer.

01
Install
npm install
Installs Astro 7, @astrojs/react, @astrojs/node, React 19, motion and the site's packages.
02
Develop
npm run dev
Runs astro dev: edit a view in src/views and the page updates.
03
Ship
npm run build && npm start
astro build prerenders every page; npm start runs server.ts on Node.js 22.18 or later.

Only in Astro

What Astro adds

Prerendered at build time

Every page, CMS items included, is rendered to its own HTML document by astro build, then hydrates as one React island.

The layout stays

A link loads the next page with Astro's router, which keeps the island: the layout template two pages share stays mounted, with an open menu or a navigation bar collapsed on scroll. Page transitions play as the browser's view transitions.

The same in every framework

One project, five frameworks

Pages and components

Pages, layout templates and design components are React components in src/views, src/layouts and src/components, each with its CSS module. Components keep the designer's folders, variants and hover states.

Styles and fonts

Colour styles become CSS variables in src/styles, shared text styles become classes, and every font family gets its @font-face rules.

CMS content

Each Framer CMS collection becomes a schema (src/cms/<collection>.ts) and its records as JSON (src/cms/<collection>.json).

Forms

Native Framer forms post to the project's own API route, with a rate limit, a honeypot and field checks, and deliver submissions to webhooks you set in environment variables. A Vite site, which has no server, posts them to a form service.

Animations

Animations and interactions run on motion, the open-source animation library. No Framer runtime: a small, readable kit in src/lib/deframer replaces it.

SEO files

Every page keeps its title, description and social image. The site's redirects, robots.txt and sitemap.xml come with it, and a README lists every route.

Limits

What to expect

Plain facts before you convert.

The result is close to the original but not guaranteed to be identical. Check every page, in the compare view when a live preview is available or by running the project.
Code components and third-party embeds stay as the site's own code: they come across as source, not rewritten.
Very large sites may not fit a conversion. Keeping images, fonts and videos on Framer's CDN (the default) makes the download much smaller.
The project runs its own server.ts (Node.js 22.18 or later) for redirects and forms; the pages themselves are prerendered HTML.

FAQ

Framer to Astro, answered

Limits, files and verification are in the main FAQ, credits on the pricing page.

Can I convert a Framer site to Astro?

Yes. Deframer converts a published Framer site into an Astro 7 project written in TypeScript, which you download as a .zip and own. Every page is prerendered to static HTML and hydrates as one React island, with the same animations, interactions, CMS and forms.

Why one React island instead of many?

A Framer page is one tree: its layout, effects and interactions depend on each other. Keeping the page as one island renders it as published, and the island stays mounted between pages, so a shared navigation keeps its state.

Is the Astro project a static site?

Its pages are: astro build prerenders every one to HTML. The project also runs a small server.ts on Node.js 22.18 or later that applies the site's redirects, serves those pages and handles the form routes with Astro's Node adapter. For a static site with no server, pick Vite.

Where do page titles and descriptions go?

In each page's index.astro head, or its _head.json table for CMS items; the site's own tags are in src/site/head.ts.

What does it cost?

Converting is free. Downloading the code is for your own site, or one whose owner allows it: verify the site for a 1-credit download, or confirm you own it or have permission and download for 10 credits. See pricing.

Get started

Your site. Your Astro code.

Convert
Download
Deploy anywhere