How to export a Framer site to TanStack Start

Framer has no code export, so to move a Framer site to TanStack Start you either rebuild it by hand or convert the published site. With Deframer, you paste the site's address, pick TanStack Start in the framework menu and convert for free; the download is a TanStack Start project in TypeScript with one file route per page, React components with CSS modules, the CMS as JSON and native forms as API routes. It builds with Rsbuild and runs on srvx, on Node.js 22.18 or later.

Deframer is an independent tool and is not affiliated with, endorsed or sponsored by Framer. Downloading code is for your own site, or one whose owner has given you permission.

Who should pick TanStack Start?

TanStack Start suits teams that already use TanStack Router or TanStack Query, or that want fully typed routes and a server they control without the conventions of the Next.js App Router. If you have no preference, Next.js is the default and has the most hosting options; which framework should your Framer site use? compares all five targets.

Whichever you pick, the pages, components, styles, CMS content and forms are the same React and TypeScript code. Only the routes, the server and the build differ, so the choice is mostly about what your team will maintain.

Step by step

1. Sign in and paste the URL. Use the published address (*.framer.website, *.framer.app or your custom domain), not the editor link.
2. Pick TanStack Start in the framework menu. Next.js is selected by default.
3. Choose the asset option. "Assets on Framer's CDN" (the default) keeps images, fonts and videos on Framer's CDN; "Assets in the project" downloads them into public/.
4. Convert. Progress runs through queued, fetching, modules, converting and packaging. A conversion can take up to 10 minutes and costs nothing.
5. Review the notices on the result page, and the compare view when live previews are on.
6. Verify and download. Publish Deframer's one-line meta tag in Framer's Site Settings, Custom Code, then click Check again. A verified download uses 1 credit, or nothing with the lifetime deal. See verifying Framer site ownership.
7. Run it locally.

npm install
npm run dev

npm run dev runs rsbuild dev. For production:

npm run build
npm start

npm run build builds with Rsbuild; npm start serves the build with srvx.

A tour of the project

src/
  routes/         File routes: index.tsx per page, __root.tsx, API
  router.tsx      The router and its locale URL mapping
  server.ts       Request handler: redirects and URL forms
  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
  lib/deframer/   The small kit that replaces Framer's runtime
public/           robots.txt, sitemap.xml, assets kept in the project
rsbuild.config.ts

Routes and metadata

Each page is src/routes/**/index.tsx, with its title, description, Open Graph tags and canonical URL in the route's head(), or in a head.json table beside it. Start updates the head on client navigation, so metadata stays right when a visitor clicks through the site.

src/routes/__root.tsx is the document every page renders into. It also holds the site-wide tags and the custom code you had in Framer's site settings, and the 404 page for unknown URLs.

The server

src/server.ts handles every request first. It applies the site's redirects and gives each page the URL form the site published (with or without a trailing slash), then hands the request to Start. That keeps old links and search results working after the move.

Pages, components and styles

Views in src/views are the pages themselves; layout templates (navigation, footer) are in src/layouts. Design components keep the designer's folders, variants and hover states, each with a CSS module. Color styles become CSS variables in src/styles, and every font family gets its @font-face rules. Animations run on motion through the kit in src/lib/deframer, and there is no Framer runtime.

CMS and forms

Each collection becomes src/cms/<collection>.ts (its schema) and src/cms/<collection>.json (its records). Native forms post to src/routes/api/forms/<form>.ts, with a rate limit, a honeypot and field checks. Copy .env.example to .env and set the webhook variables so submissions reach you.

Typed routes and type-checking

TanStack Router types its routes from a generated route tree, src/routeTree.gen.ts. The project's npm run typecheck builds once to generate that tree if it is missing, then checks the project with TypeScript.

It checks two kinds of code differently. The project's own code is checked with tsconfig.json, including strictNullChecks, which TanStack Router requires. The site's code components in src/code and marketplace code in src/vendor are checked the way Framer compiled them, without strictNullChecks, because Framer never type-checked that code. Every error is still reported, so you can tighten those files over time. Framer to TypeScript goes deeper.

Where can you deploy it?

A TanStack Start project needs a Node.js server, version 22.18 or later. It is not a static export. Good options:

Set the form webhook variables on the host, and check robots.txt, sitemap.xml and canonical URLs against your production domain before moving DNS. Moving a domain off Framer without downtime covers the cutover.

What to check before launch

• Every route in the README renders, including CMS detail pages and the 404 page.
• Desktop, tablet and phone layouts look right (about 1440, 768 and 390 pixels).
• Hover states, appear effects and page transitions play.
• Forms deliver to your webhook.
• npm run typecheck passes, or you know which files report errors and why.
• Redirects from the old site still answer with the right target.

Limits

The result is close to the original but not guaranteed to be identical. Code components and third-party embeds stay as the site's own code. Very large sites may not fit a conversion; the default asset option keeps the project small.