Framer to React
Framer runs on React but exports none of it. This is what a converted Framer site looks like as an actual component project — the file tree, the naming, and what is honestly still generated markup underneath.
The short answer
Framer has no React export. It is built on React internally, which is why people expect one, but published sites depend on Framer's runtime and backend services and cannot be exported at all. A converter is the only route.
What separates a React conversion from the HTML converters that dominate this category is component boundaries. An HTML tool gives you one generated file per page. A React conversion gives you one file per section, named as you named it in Framer, composed by a view, rendered by a route — a project a developer can open and continue.
What you actually get
A Next.js App Router project. The parts that matter:
src/sections/home/Hero.tsx one file per Framer section src/sections/home/Pricing.tsx named from your Framer section names src/sections/shared/Footer.tsx sections reused across pages, emitted once src/views/HomePage.tsx composes that page's sections app/page.tsx the route that renders the view app/work/[slug]/page.tsx nested routes preserved as authored
Section names come straight from Framer, so the file tree reads like your layer panel. That is the whole trick: the names you already chose become the API of the codebase, instead of a developer having to invent them after the fact from a wall of generated markup.
Text lives apart from markup
Each section's copy is hoisted into a named copy export, so changing a headline is editing a string, not editing JSX:
import { copy } from "@/src/sections/home/Hero/copy";This is also what makes the visual editor and the MCP tools safe on a converted site — an agent rewriting a headline changes one string and cannot disturb the layout around it.
What this is not
Worth being blunt, because the category oversells here. The components are your original markup and inline styles organised into files— not a hand-written rewrite. Class names are Framer's generated ones. The runtime ships with the project, which is what keeps every animation identical and also what keeps this mode off the top of the Lighthouse chart.
The honest framing: this is a conversion optimised for ownership and fidelity. If you want the runtime gone and the highest possible score, that is the HTML mode, and it is a different trade. No converter turns a Framer design into code that looks hand-authored, and any that claims to is describing a rewrite you would still have to check line by line.
Related: All routes from Framer to code · Convert Framer to Next.js · Framer to HTML converter · Framer vs owning your code
FAQ
Can you export a Framer site to React?
Not from Framer. Framer is built on React internally, which is why people assume an export exists, but its help documentation is explicit that published sites cannot be exported — they depend on Framer's runtime and backend services. Getting React out means a third-party conversion that works from your published public URL and rebuilds the site as a component project.
What do the exported React components actually look like?
One file per section, named from the section names you set in Framer. A Hero section on the home page becomes src/sections/home/Hero.tsx. Each page gets a view that composes its sections at src/views/HomePage.tsx, and an App Router route renders that view. Sections used on more than one page are emitted once into src/sections/shared/ rather than duplicated.
Is it real React or just HTML wrapped in a component?
Real components with real boundaries — one file per section, composed by a view, imported by a route. What it is not is a hand-written rewrite: the markup and inline styles are the ones Framer authored, organised into files, so the rendered DOM matches the original exactly. Measured element parity with the source is 100%. You get code you can extend and move; you do not get code that looks like a developer wrote it from scratch, and no converter can honestly promise that.
Can I edit the text without touching the markup?
Yes. Each section's text is hoisted into a named copy export, so changing a headline means editing a string rather than hunting through generated JSX. That is also what lets the visual editor and the MCP tools change copy safely without disturbing the layout around it.
Do animations survive the React conversion?
Yes, in the Next.js Converter. It keeps Framer's runtime intact on purpose, so every animation, scroll effect and interaction behaves as authored. The trade is performance: that runtime still ships. If you want the runtime gone, the HTML mode strips it and rebuilds appear and scroll animations with CSS and IntersectionObserver, at the cost of some runtime-only effects.
Can I use the exported components in an existing React project?
Section files are ordinary React components, so they can be imported elsewhere — but be realistic about it. They carry Framer's generated class names and expect the runtime and stylesheet that ship with the project, so lifting one section into an unrelated codebase means bringing that context along. Moving whole pages, or extending the exported project itself, is the path that works cleanly.
Is it Next.js or plain React?
A Next.js App Router project — one route per page, prerendered. Next.js is React, so anything you know about React components applies; you additionally get routing, prerendering and a build that deploys to Vercel, Netlify or Cloudflare Pages without configuration. There is no plain-CRA output, because a bare React bundle would lose the per-page routes and the prerender that keeps the DOM identical.
What does a Framer to React conversion cost?
It is subscription-only, from $15/month at launch on Starter, which includes three conversions a month. Pricing is per site rather than per page, so a twenty-page site costs the same as a one-page one. There is no free tier and no pay-as-you-go as of September 2026.
See your own site as components
Paste your published Framer URL and get a Next.js project with one named component per section — yours to extend, host and keep.
Example: https://your-site.framer.website