Framer to React: turn a Framer site into React code
Updated 15 October 2026
Framer sites run on React, but Framer doesn't give you the code. To get it, export single components into your own app with the React Export plugin, or turn the whole site into a React and Next.js project with deframer, from its link.
Framer is React underneath
Every Framer page is a tree of React components, rendered by Framer's runtime and Framer Motion for the animations. The editor hides that code, and Framer doesn't export it. So “Framer to React” isn't a redesign: the site already is React, and the job is to get it into a project you control.
Option 1: the whole site as a React project
deframer takes the link of a published Framer site or template and builds a Next.js project: React pages for every route, sections named in the code, the animations and breakpoints, the CMS pages, and every image and font. Next.js is React, so each page is a React component you can open, change and reuse.
Log in once:
npx deframer@latest loginExport the site from its link:
npx deframer@latest create https://yoursite.framer.website ./siteRun it:
cd site && pnpm dev
Inside the project, pages live in framer/site/pages/, every text is in content.overrides.json and the colours are in theme.css. The full walk-through is in Framer to Next.js: copy any Framer site into a real codebase.
Option 2: single components into your own app
If you already have a React app and only want some Framer-designed parts in it, the React Export plugin (by unframer) exports the components you select in a Framer project as typed React files, with their breakpoints. You run the unframer CLI to download them and import them like any component. It needs the Framer project open, and its marketplace listing asks for a $50 a month (personal) or $250 a month (commercial) subscription.
Which option fits
| deframer | React Export plugin | |
|---|---|---|
| What it exports | The whole site | Components you select |
| What it needs | The site's link | The Framer project |
| What you get | A Next.js project that runs on its own | Files to add to your own React app |
| Price | Free preview, then one payment | $50 or $250 a month |
After the export
Treat it as your codebase: restyle it, add pages, connect a database or a form backend, and deploy it wherever you host React apps. To keep a page that still changes in Framer up to date, run npx deframer@latest sync: your edited files are kept. See Make it yours and Self-host a Framer site.
Sources
What it costs: Framer, a designer, or deframer
Keeping a site on Framer's Pro plan costs $30 a month, billed yearly: $360 every year, for each site, for as long as it stays on Framer. Hiring a freelance Framer designer to build a site usually costs $1,500 to $5,000, before any change you ask for later.
deframer is one payment: $39 once until 1 November. It turns any Framer site or template into a codebase you own, so you start from a finished design instead of an empty page, and you host it where you choose, on a free or low-cost plan if you like.
| Option | Cost | What you pay for |
|---|---|---|
| Framer Pro plan | $360 a year, every year | Hosting and editing one site on Framer |
| Freelance Framer designer | $1,500 to $5,000 per site | Someone designing and building the site for you |
| deframer Lifetime | $39 once until 1 November | Every page of every site as Next.js code, re-sync forever |
Over three years, Framer Pro alone comes to $1,080 for one site. deframer is paid once, for every site, with a 30-day money-back guarantee. Hosting your code is billed by the host you pick.
Sources: Framer pricing (Pro, yearly billing); Goodspeed, “How to find the best Framer developer for hire” (freelance rates, citing Contra's 2026 hiring guide). Checked 15 October 2026.
Questions
Is Framer built on React?
Yes. Framer sites are React apps rendered by Framer's runtime. That's why a Framer site can become a React project without being redesigned.
Can I get React code from a Framer site?
Yes. deframer turns a published Framer site into a Next.js project with React pages. The React Export plugin exports single components from a Framer project into your own React app.
Does it work with Vite, Remix or plain React?
deframer creates a Next.js project. The React Export plugin's components can go into Next.js, Remix, Vite or Astro. If you need another framework, start from the Next.js export and move the sections you want.
Do I still need Framer after the export?
No. The project runs on its own: images and fonts are in the project and nothing loads from Framer. You can keep designing in Framer and pull changes in with deframer sync, or stop using Framer.
Can my AI agent edit the code?
Yes. The project has an AGENTS.md that explains where every page, text and image lives, so Claude Code, Codex or Cursor can change sections by name.
Is it cheaper than paying a developer to rebuild the site in React?
Yes. A freelance Framer designer or developer usually charges $1,500 to $5,000 per site, and Framer's Pro plan is $360 a year per site. deframer is one payment for every site, and the export keeps the design, animations and CMS.
Try it on your site
See your Framer landing page running as code first, for free and without a card. Preview my site free →