How to convert a Framer website to React

To convert a Framer website to React, you either rebuild it in React, export selected components with an editor plugin, or convert the whole published site with a tool that writes React source. Framer has no code export. Deframer produces a React 19 project for Next.js, TanStack Start, Astro, React Router or Vite (Framer to React compares them); if you need a standalone React app, you can lift components out with their CSS modules, styles and the small @/deframer kit.

This post is the how-to. For the background question, whether Framer is "React under the hood" and what that means, see is Framer built on React?. Deframer is an independent tool and is not affiliated with, endorsed or sponsored by Framer.

Why isn't a published Framer site already a React project?

Because it's the output of a build, not the source. A published Framer page is rendered by Framer's runtime from modules the editor publishes, then hydrated with React in the browser. You can see React running, but there's no project to open: no package.json, no component files with names you chose, no routes folder. Framer's help center says plainly that it "does not offer HTML export for self-hosting" and that published sites "are not fully static" (Framer Help).

So "convert to React" means producing source that a React toolchain can build, and there are three different things people mean by it.

Static snapshot vs generated components

A snapshot is useful for hosting a copy, but it doesn't give you React components to work with. We cover it in Framer to HTML or Framer to Next.js.

Component exporters are built for a different workflow: you keep designing in Framer and drop its components into a React app you already have. Unframer's docs, for example, say the generated files should never be edited by hand and that you re-run its CLI after changes in Framer, and its components run with the unframer package (Unframer). Its full-website guide has you assemble pages and react-router routing yourself in a Vite app (Unframer guide).

A whole-site conversion is the route when you're leaving Framer and want code you'll maintain. Best Framer to Next.js converters in 2026 compares the tools in each group.

When does a standalone React app (Vite) make sense instead of Next.js?

A marketing site usually belongs in a framework that renders HTML on the server, because search engines and link previews read that HTML. Next.js does this out of the box, and so do the other frameworks Deframer writes: TanStack Start renders on the server, and Astro, React Router and Vite prerender every page to HTML at build time. A client-rendered React app built with Vite still makes sense when:

• The Framer pages are going into an existing React app, such as a product dashboard, and that app is already a Vite single-page app.
• SEO doesn't matter for these screens, for example pages behind a login.
• Your team has standardized on a React framework Deframer doesn't write (Remix, for example) and you're adapting components into it. For React Router's framework mode or TanStack Start, convert to it directly instead.

If none of those apply, keeping the converted project is usually less work than moving out of it. It's a normal React 19 app: you write React components, use hooks, and add any npm package.

Converting with Deframer: what you get

Deframer converts the published site into a TypeScript project: Next.js (App Router) by default, or TanStack Start, Astro, React Router or Vite if you choose one. In short:

1. Paste the published URL (framer.website, framer.app or a custom domain) and convert. Converting is free.
2. Review the result in the compare view when live previews are on.
3. Verify the site and download the project (1 credit with a verification tag, 10 without; see pricing).
4. Run npm install and npm run dev.

The React code lives in predictable places:

• src/views/ holds one component per page (home.tsx with home.module.css).
• src/components/ holds the design components, in the designer's folders, each with a CSS module.
• src/layouts/ holds templates such as navigation and footer.
• src/styles/ holds color tokens (tokens.ts), text styles and @font-face rules.
• src/cms/ holds CMS collections as JSON plus a schema module.
• src/code/ and src/vendor/ hold your own code components and marketplace code.
• src/lib/deframer/ is the kit, imported as @/deframer, which replaces Framer's runtime.
• The routes are each framework's own: src/app/ in Next.js, src/routes/ in TanStack Start, React Router and Vite, src/pages/ in Astro. They hold only routes and their metadata; the pages themselves are the same in all five.

The full tour is in what you get in a converted Next.js project, and the step-by-step export is in how to export a Framer site to Next.js.

How do you move converted components into another React app?

You copy the component with what it depends on, then replace the few places the kit talks to its framework. The steps below use a Next.js export as the example. Expect real work for a whole site and modest work for a few sections. Here's what's involved.

1. Copy the component and its dependencies

• [ ] The component's .tsx file and its .module.css.
• [ ] Every component it imports from src/components/, src/icons/, src/code/ or src/vendor/, with their CSS modules.
• [ ] src/styles/ (tokens, text styles, fonts) and src/app/globals.css.
• [ ] src/lib/deframer/, the kit. Only the modules your site uses are in it.
• [ ] What the root layout, src/app/layout.tsx, wraps every page in: the kit's <SiteStyles> (given the design tokens), <SiteRouter> and <SVGTemplates>, inside a <div id="main">. Your app's root needs the same wrappers.
• [ ] src/site/routes.ts, because the kit's links and routing read the site's route table from @/site/routes.
• [ ] Any CMS files in src/cms/ the component reads.
• [ ] The npm dependencies from package.json: at least react, react-dom and motion, plus any packages your code components import.

2. Reproduce the TypeScript and JSX settings

The generated code expects two settings from tsconfig.json: the @/ path aliases, and JSX compiled through the kit's runtime:

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

The kit's JSX runtime matters: it applies defaultProps the way React 18 did and passes DOM elements only props they can render, which code written for Framer relies on. In a Vite app you'd mirror this with resolve.alias entries for @/deframer and @/, and the React plugin's jsxImportSource option set to @/deframer. CSS modules work in Vite without extra setup.

3. Replace the Next.js touchpoints in the kit

The generated components themselves don't import next/link or next/image; links go through the kit's own Link, and the project already serves images unoptimized. The Next.js dependencies are inside the kit, in a handful of files (only some will exist in your project):

Treat this table as a map of where to look, not a finished port: we don't ship or test a Vite build of the kit.

4. Rebuild what lived in Next.js routes

Some features are Next.js files rather than components, so they don't come along:

• Page metadata. Titles, descriptions, Open Graph and canonical URLs are metadata exports in src/app/**/page.tsx. In React 19 you can render <title> and <meta> tags inside a component; for crawlers you still want server rendering.
• Forms. Each form posts to a route handler, such as src/app/api/forms/contact/route.ts, which calls src/lib/forms.ts (rate limit, honeypot, validation, webhook delivery). Point the form at an endpoint your app provides.
• Routing policy. src/proxy.ts (trailing slashes, redirects) and the redirects() list in next.config.ts need equivalents on your host.
• CMS pages. Detail routes like src/app/blog/[slug]/page.tsx list items with generateStaticParams(). Recreate them with your router, reading the same JSON.

5. Check it

Render the moved component inside your app, then compare it with the original at 1440, 768 and 390 pixels wide, hover and click everything, and run npx tsc --noEmit. Code components written in Framer were never type-checked there, so some type errors may be yours, not the port's; Framer code components and overrides in Next.js explains how to tighten them.