Deframer

Framer to code

Framer to React Router. Framework mode, prerendered.

Paste your Framer site's address and get a React Router 8 project in framework mode, in TypeScript: one route module per page with its meta, every page prerendered at its published URL, your CMS as JSON and your forms as routes.

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

Pick React Router in the converter's framework menu. Free to convert.

What you get

A React Router project in framework mode

src/routes.ts lists the routes and src/root.tsx is the document, which keeps each page in its layout template. The pages, components and styles are the same as in every other framework.

Project structure
src/
  routes/         Route modules: one index.tsx per URL, and the form routes
  routes.ts       Each URL pattern and the module that serves it
  root.tsx        The document, each page in its layout template
  entry.server.tsx  Server rendering
  views/          Pages, each with its .module.css
  layouts/        Layout templates: navigation and footer
  components/     Components, in the design project's folders
  cms/            CMS collections: <collection>.ts + <collection>.json
  lib/deframer/   The small kit that replaces Framer's runtime
scripts/
  prerender.ts    Prerenders every page at its published URL
react-router.config.ts
server.ts         Redirects, static files, then React Router
src/routes/**/index.tsx
One route module per page, with its title and description in meta; CMS items take theirs from a head.json table.
src/routes.ts
The route config: every URL pattern and its module.
scripts/prerender.ts
Runs after react-router build and writes every page's HTML at its published URL.
server.ts
Applies the site's redirects and URL forms, serves the static and prerendered files, then hands the rest to React Router.

Run and deploy

Unzip, install, run. Nothing from Framer.

A React Router project prerenders every page at build time, and its server.ts runs on Node.js 22.22 or later: any Node.js host, a container or your own server.

  1. 01

    Install

    npm install

    Installs React Router 8, Vite, React 19, motion and the packages the site's own code uses.

  2. 02

    Develop

    npm run dev

    Runs react-router dev: edit a view in src/views and the page updates.

  3. 03

    Ship

    npm run build && npm start

    react-router build, then scripts/prerender.ts; npm start runs server.ts on Node.js 22.22 or later.

Only in React Router

What React Router adds

Framework mode

React Router 8 in framework mode, built with Vite: route modules with meta, a route config in src/routes.ts and typed routes from react-router typegen.

The layout stays

The root route keeps each page in its layout template, so moving between pages that share one keeps it mounted, with its state.

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.
  • The project runs its own server.ts on Node.js 22.22 or later, which React Router 8 requires.

FAQ

Framer to React Router, answered

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

Can I convert a Framer site to React Router?

Yes. Deframer converts a published Framer site into a React Router 8 project in framework mode, written in TypeScript, which you download as a .zip and own: one route module per page, every page prerendered at build time, CMS collections as JSON and native forms as routes.

Is this React Router's framework mode or a single-page app?

Framework mode: route modules, a route config in src/routes.ts and server rendering. Every page is prerendered at build time, and server.ts serves the result on Node.js 22.22 or later.

Is it the same as Remix?

React Router's framework mode is where Remix's features continue, so the project will look familiar to Remix developers: route modules with meta, and a server entry. It uses React Router 8 packages.

Where do page titles and descriptions go?

In each route module's meta in src/routes/**/index.tsx, or its head.json table for CMS items; the site's own tags are in src/site/head.ts.

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 Router code.

  1. Convert
  2. Download
  3. Deploy anywhere