How to convert a Framer site to React Router framework mode

To convert a Framer site to React Router, paste the published site's address into Deframer, pick React Router in the framework menu and convert for free. The result is a React Router 8 project in framework mode, written in TypeScript: one route module per page with its meta, every page prerendered at its published URL, CMS collections as JSON and native forms as routes. A small server.ts serves it on Node.js 22.22 or later.

Deframer is an independent tool and is not affiliated with, endorsed or sponsored by Framer. You download the code of sites you own, or sites whose owner has given you permission.

Framework mode, not a single-page app

React Router can be used in three ways: as a plain library inside your own app, as a data router, or as a full framework with route modules, server rendering and a build. The converted project uses framework mode. That matters for a website:

• Every page is rendered on the server and prerendered at build time, so search engines and visitors get full HTML.
• Each route module exports its own meta, so titles and descriptions belong to the page.
• The root route keeps each page in its layout template, so the navigation stays mounted between pages that share it.

If you know Remix, the shape will look familiar: framework mode is where Remix's features continue. Framer to Remix in 2026 explains that history.

Step by step

1. Paste the published URL (*.framer.website, *.framer.app or your custom domain).
2. Choose React Router in the framework menu; Next.js is the default.
3. Pick where assets live: on Framer's CDN (default) or in the project's public/.
4. Convert. It's free and takes up to 10 minutes. Live progress shows each stage.
5. Review the notices and, when live previews are on, the side-by-side compare view.
6. Verify and download. Publish the one-line verification tag in Framer's Custom Code, click Check again, and download for 1 credit (or nothing with the lifetime deal). Details: verifying Framer site ownership.
7. Run it:

npm install
npm run dev        # react-router dev
npm run build      # react-router build, then scripts/prerender.ts
npm start          # server.ts on Node.js 22.22 or later

What's inside the project?

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.ts

The route config lists every URL pattern and the module that serves it. Adding a page means adding a view, a route module and a line here.

Route modules

Each src/routes/**/index.tsx exports the page's meta: title, description and social tags. CMS detail pages read theirs from a head.json table, one entry per item, and the site's own head tags live in src/site/head.ts.

src/root.tsx

The document. It holds the site's tags, the custom code from Framer's site settings, the kit's styles and router, and the 404 page for unknown URLs and unlisted CMS items. It wraps each page in its layout template, taken from the route's handle.

scripts/prerender.ts and server.ts

After react-router build, the prerender script renders every page once, at the URL the site published it at. server.ts then applies the site's redirects and URL forms, serves static and prerendered files, and hands everything else (such as form submissions) to React Router's handler.

Everything else

Views, layouts, components with CSS modules, tokens, text styles, fonts, CMS JSON and the kit are the same code as in every other target. Animations and interactions run on motion.

Forms

Each native form gets a route in src/routes/api/forms/<form>.ts that checks fields, applies a rate limit and a honeypot, and delivers to a webhook. Copy .env.example to .env and set FORMS_WEBHOOK_URL, or a per-form variable, before you test. Migrating Framer forms covers webhooks and a parallel run.

Adding a new page

Because routes are listed explicitly, adding a page takes three small steps:

1. Create the view, for example src/views/careers.tsx with careers.module.css, reusing components from src/components and the layout template your other pages use.
2. Add a route module, src/routes/careers/index.tsx, that renders the view and exports its meta (title and description).
3. Add the route to src/routes.ts, then add the URL to the prerender list if you want it prerendered like the others, and to public/sitemap.xml.

Copying an existing route module and its entry in src/routes.ts is the quickest way to get the shape right.

Type-checking

React Router generates route types with react-router typegen, and the project's npm run typecheck checks it with TypeScript. Like the other targets, the project's tsconfig.json is not in strict mode, because the site's code components were never type-checked in Framer. Errors are still reported, so you can fix them file by file. See Framer to TypeScript.

Deploying

The project needs Node.js 22.22 or later, which React Router 8 requires. Any Node.js host, a container or your own server works:

Because every page is prerendered, most requests are file reads. The server still matters for redirects and forms, so a pure static host is not enough. If you want no server at all, Vite is the static option.

Checks before launch

• Every route in the README renders, including CMS items and the 404 page.
• The three breakpoints look right.
• Moving between pages keeps the shared navigation's state.
• Forms reach your webhook.
• Old URLs redirect as they did on Framer (check with curl -I).
• Canonical URLs, robots.txt and sitemap.xml use your production domain.