Is Framer built on React? Getting React code from a Framer site

Yes. Published Framer sites are rendered with React, Framer's code components are React components, and its animation library started life as Framer Motion, now published as Motion. But Framer doesn't give you the React source of your site. To get React code, you either rebuild the design in React, or convert the published site with a tool such as Deframer, which writes a Next.js App Router project with React 19 components in TypeScript.

What you get from a conversion is real React, with a few particulars worth knowing before you plan to reuse it.

How React shows up in Framer

• Published sites. Each page you publish is made of modules that Framer's runtime renders with React, on the server and then in the browser. That's why a converter can read a published site as components rather than as flat HTML.
• Code components and overrides. When you write code in Framer, you write React: a code component is a React component, and an override is a function that changes a layer's props. Framer's developer documentation covers both.
• Motion. The animation library many React developers know as Framer Motion is now published as motion, imported from motion/react (Motion). Framer's springs, transitions and gestures are built on it.

None of that means Framer is "a React app you can open". The editor stores your design in its own format, and the published output is built for Framer's runtime, the framer package, not for a React project of your own.

Your options for getting React code

Rebuild in React

Use your Framer site as the reference and build the components yourself. You get exactly the structure you want, at the cost of matching every breakpoint, variant and animation by hand.

Export components from the editor

Framer's marketplace lists plugins aimed at this, such as React Export, whose listing describes it as bridging "Framer's intuitive design environment and your production-ready React codebase" (Framer Marketplace). Plugins work on components inside your project; check what each one covers before relying on it for a whole site.

Convert the whole published site

Deframer converts the entire published site into a Next.js project: every page, layout, component, style, CMS collection, form and animation. It reads only the public files the site serves, so it needs no access to your Framer account. See how to export a Framer site to Next.js for the steps.

What the React code looks like after converting

A converted project is a standard Next.js 16 app with React 19, where every file is .ts or .tsx:

• Design components in src/components/, in the designer's own folders, each with a CSS module. Their props use human names: variants are called what the designer called them, such as "Desktop" or "D / Light", not Framer's internal ids.
• Pages as components in src/views/, wired to routes in src/app/.
• Your own code components and overrides in src/code/; marketplace code in src/vendor/.
• Styles in src/styles/: color styles as CSS variables, shared text styles as classes, fonts as @font-face rules.

Two details matter if you want to use these components outside the project.

They're client components. Every generated module starts with "use client", because the design components use state, effects and animation. Your route files stay server components and render them.

They use the project's kit. Instead of the framer package, the code imports a small helper kit that ships in the project at src/lib/deframer/, imported as @/deframer. The kit reproduces what Framer's runtime does for published sites: variants, breakpoints, effects, routing, CMS, forms. The project's tsconfig.json also points JSX at it:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@/deframer",
    "paths": {
      "@/deframer": ["./src/lib/deframer"],
      "@/deframer/*": ["./src/lib/deframer/*"],
      "@/*": ["./src/*"]
    }
  }
}

That JSX runtime applies defaultProps to function components as React 18 did, which code written for Framer relies on, and passes DOM elements only the props they can render.

Reusing components in another React app

The simplest path is to keep working in the converted project and build new features there, since it's an ordinary Next.js app. If you do want to move a component into another codebase, bring what it depends on:

1. the component's .tsx file and its .module.css;
2. the components it imports, and their CSS modules;
3. the styles it uses from src/styles/ (color tokens, text styles, fonts);
4. the kit, src/lib/deframer/, plus the @/deframer path alias and jsxImportSource setting in your tsconfig.json.

Then render the component inside a client boundary and check it at each breakpoint. Deframer's terms let you use, change and distribute the kit as part of the project and its derivatives; read the terms for the exact wording.

For a component you'll maintain long-term, it can be cleaner to treat the converted version as the reference and rewrite it in your app's own conventions. Framer code components and overrides in a Next.js project covers the code you wrote in Framer, and what you get in a converted Next.js project tours every folder.

Types and strictness

Framer's editor never type-checks code components, so code you wrote there can contain real type errors. A project that contains such code builds with typescript: { ignoreBuildErrors: true } in next.config.ts, with a comment saying why. npx tsc --noEmit still lists the errors, so you can fix them file by file and then remove the setting. Generated components get explicit prop and ref types where TypeScript can't infer them.

Cost and ownership

Converting is free; downloading a converted project uses one credit: $10 for one, $25 for five or $100 for thirty, on the pricing page. You own the converted code of your own site. Deframer is an independent tool, not affiliated with Framer, and gives the code only of sites you own or have the owner's permission to download.