Deframer

Framer to code

Framer to React. In the framework you choose.

Framer sites are built with React. Deframer turns a published one into a React 19 project in TypeScript you own, for Next.js, TanStack Start, Astro, React Router or Vite: the same components, styles and content, under the framework you pick.

Your published site on *.framer.website, *.framer.app or your own domain.

Pick the framework in the converter; Next.js is the default. Free to convert.

What you get

The same React code in all five frameworks

Pages, components, styles, CMS content and forms are written once, as React and TypeScript. Only the routes, the document, the server (a Vite site has none) and the build are each framework's own.

Project structure
src/
  views/          Pages, each with its .module.css
  layouts/        Layout templates: navigation and footer
  components/     Components, in the design project's folders
  styles/         Colour tokens, text styles, @font-face rules
  cms/            CMS collections: <collection>.ts + <collection>.json
  code/           The site's own code components and overrides
  vendor/         Marketplace components, as source
  lib/deframer/   The small kit that replaces Framer's runtime
  lib/forms.ts    Form submissions: checks, webhook delivery
public/           robots.txt, sitemap.xml, assets kept in the project
Next.js
src/app: App Router routes, one page.tsx per URL.
TanStack Start
src/routes: file routes with head(), built with Rsbuild, run on srvx.
Astro
src/pages: every page prerendered, one React island that keeps the layout.
React Router
src/routes and src/routes.ts: framework mode, every page prerendered.
Vite
src/routes and scripts/prerender.ts: a static site in dist/, for any static host.

Run and deploy

Unzip, install, run. Nothing from Framer.

A Next.js project deploys anywhere Next.js runs. TanStack Start and Astro projects run on Node.js 22.18 or later, React Router on 22.22 or later: any Node.js host, a container or your own server. A Vite site needs no server: dist/ goes on any static host.

  1. 01

    Install

    npm install

    Every project installs React 19, motion and the packages the site's own code uses, plus its framework.

  2. 02

    Develop

    npm run dev

    Starts the framework's development server, whichever you chose.

  3. 03

    Ship

    npm run build && npm start

    Builds for production and starts the server: Next.js, srvx, or the project's own server.ts. A Vite site only builds: dist/ is the site.

Pick a framework

Five frameworks, one conversion

You choose each time you convert, and converting again for another one is free.

The same in every framework

One project, five frameworks

Next.js, TanStack Start, Astro, React Router and Vite projects share everything below. Only the routes, the document, the server and the build differ.

Pages and components

Pages, layout templates and design components are React components in src/views, src/layouts and src/components, each with its CSS module. Components keep the designer's folders, variants and hover states.

Styles and fonts

Colour styles become CSS variables in src/styles, shared text styles become classes, and every font family gets its @font-face rules.

CMS content

Each Framer CMS collection becomes a schema (src/cms/<collection>.ts) and its records as JSON (src/cms/<collection>.json).

Forms

Native Framer forms post to the project's own API route, with a rate limit, a honeypot and field checks, and deliver submissions to webhooks you set in environment variables. A Vite site, which has no server, posts them to a form service.

Animations

Animations and interactions run on motion, the open-source animation library. No Framer runtime: a small, readable kit in src/lib/deframer replaces it.

SEO files

Every page keeps its title, description and social image. The site's redirects, robots.txt and sitemap.xml come with it, and a README lists every route.

Limits

What to expect

Plain facts before you convert.

  • The result is close to the original but not guaranteed to be identical. Check every page, in the compare view when a live preview is available or by running the project.
  • Code components and third-party embeds stay as the site's own code: they come across as source, not rewritten.
  • Very large sites may not fit a conversion. Keeping images, fonts and videos on Framer's CDN (the default) makes the download much smaller.
  • It is a whole site, not a component library: lifting a component into another React app means taking its CSS module, its tokens and the kit functions it imports with it.

FAQ

Framer to React, answered

Limits, files and verification are in the main FAQ, credits on the pricing page.

Can you export React code from Framer?

Framer itself doesn't export a site's code. Deframer reads a published Framer site and writes it as a React 19 project in TypeScript, for Next.js, TanStack Start, Astro, React Router or Vite, which you download as a .zip and own.

Which framework should I pick?

Next.js if you want the App Router and hosts like Vercel. Astro or React Router if you want every page prerendered at build time. TanStack Start if your team uses TanStack Router. Vite if you want a static site with no server, for any static host. The pages and components are the same in all five, and converting again for another framework is free.

Is the code readable?

Yes. Components keep the designer's folders, variants and hover states, styles are CSS modules and design tokens, and there is no Framer runtime: a small kit in src/lib/deframer that you may read and change replaces it. See unedited files from a real conversion.

Can I use the components in an existing React app?

Yes, with their CSS modules, the design tokens in src/styles and the kit functions they import. Each component is a plain React component.

What does it cost?

Converting is free. Downloading the code is for your own site, or one whose owner allows it: verify the site for a 1-credit download, or confirm you own it or have permission and download for 10 credits. See pricing.

Get started

Your site. Your React code.

  1. Convert
  2. Download
  3. Deploy anywhere