Framer to Astro
Turn a published Framer site into an Astro project: every page and section as an .astro component, building back to the exact HTML Framer published, ready to host anywhere.
Convert your Framer site
Paste the published URL and choose Astro. The site is converted from its public pages, so you don't need to share the Framer project.
Example: https://your-site.framer.website
The short answer
Framer has no export to Astro, or to any code. FNJ reads the published site and writes an Astro project from it. Each section you named in Framer becomes its own component, each page a route, and npm run build gives you a static site that is the published one, page for page.
What you actually get
An Astro project. The parts that matter:
src/pages/index.astro one .astro file per route src/pages/work/project.astro nested routes kept as authored src/components/home/Hero.astro one component per Framer section src/components/home/Hero.html that section's markup, as Framer wrote it src/components/shared/Footer.astro identical sections written once src/layouts/FramerPage.astro the layout every page renders through public/assets/ images and fonts, copied from the site public/custom.css your CSS, last on every page
Component names come from the layer names in Framer, so the file tree reads like your layers panel. A section's markup sits in an .html file next to its component, imported as a string and rendered unchanged, which is what keeps the built page identical to the original.
Why it looks identical
Framer's runtime takes over a page by comparing it with its own render. If the HTML differs, even in whitespace, animations can restart or the layout can jump. So the converter doesn't rewrite anything: it cuts each section out of Framer's HTML at its exact character offsets, and the project is configured to build without compressing the HTML. On the 31-page site we tested, every built page matched the published one node for node.
What this is not
It is not a hand-written Astro rebuild. Class names are Framer's generated ones, and Framer's runtime still loads from Framer's CDN to run animations and interactions, so keep the Framer project published. Text you edit in the .html files changes what search engines read, but the runtime can show Framer's original text in the parts it renders itself.
What it is: a faithful Astro project you can build, host and keep extending, with your own pages added in plain Astro next to the converted ones. The Next.js converter and the HTML export make the same trade in their own formats.
Related: All routes from Framer to code · How to export a Framer site · Framer to React · Self-host a Framer site
Starting a new site instead?
FNJ also makes an AI website builder. Describe the site and show it one you like: it designs every page for desktop, tablet and phone on a canvas you can edit, then gives you the code, a Next.js project or static HTML, to host wherever you want.
FAQ
Can you export a Framer site to Astro?
Not with Framer itself: there is no export button for a published site. FNJ converts one from its public URL into an Astro project, with no access to the Framer project needed. Paste the URL, choose Astro, and download the project.
What does the Astro project look like?
One .astro file per route in src/pages. Each Framer section becomes a component in src/components/<page>/, named from the layer name you set in Framer, and a section that is identical on several pages is written once into src/components/shared/. Every page renders through one layout, src/layouts/FramerPage.astro, and images and fonts are copied into public/assets/.
Will the Astro site look exactly like the Framer one?
Yes. Each section's markup is cut byte for byte from the HTML Framer published, and the layout puts the pieces back in order, so the built page is the published page. Breakpoints, fonts and images are unchanged.
Do Framer animations work in the Astro export?
Yes. Framer's runtime still loads from Framer's CDN and adopts the page exactly as it does on Framer, so animations, scroll effects and interactions behave as authored. The trade is the same as FNJ's other outputs: the runtime still ships, so this is not a runtime-free rebuild, and the Framer project should stay published.
Can I edit the text in the Astro files?
Yes, and the edit reaches the HTML search engines read. Be aware that Framer's runtime re-renders the parts of the page it controls after load, so visitors can still see Framer's original text there. To change what everyone sees for certain, change it in Framer and convert again, or replace that section's markup with your own Astro.
Where can I host the Astro site?
Anywhere that serves static files. npm run build writes plain HTML to dist/, which Cloudflare Pages, Netlify, Vercel, GitHub Pages or your own server can serve with no server code. The project includes cache headers for Vercel, Netlify and Cloudflare Pages.
Astro or Next.js: which should I pick?
Astro if you want a static site and an Astro codebase to keep building in. Next.js if you plan to add React features, API routes or server rendering. Both keep the design identical and both keep Framer's runtime, and you can convert the same site both ways.
What does a Framer to Astro conversion cost?
Astro is included at no extra cost: it counts as one conversion, the same as Next.js or HTML. FNJ Lifetime Unlimited is one payment of $29 for unlimited Framer site conversions and every shipped feature, through October 31, 2026.
Get your Framer site as Astro
Paste your published Framer URL and download an Astro project, one component per section, yours to build, host and keep.
Example: https://your-site.framer.website