Deframer

Framer to code

Framer to TanStack Start. File routes on Node.js.

Paste your Framer site's address and get a TanStack Start project in TypeScript: one file route per page with its head, React components with CSS modules, your CMS as JSON and your forms as API routes. It builds with Rsbuild and runs on srvx.

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

Pick TanStack Start in the converter's framework menu. Free to convert.

What you get

A TanStack Start project with file routes

src/routes holds one index.tsx per page with its head(), the __root.tsx document and the API routes. The pages, components and styles are the same as in every other framework.

Project structure
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
src/routes/**/index.tsx
One per page, with its title, description, Open Graph and canonical URL in head().
src/routes/__root.tsx
The document every page renders into.
src/server.ts
Applies the site's redirects and URL forms before the router.
src/routes/api/forms/<form>.ts
One API route per native form.

Run and deploy

Unzip, install, run. Nothing from Framer.

A TanStack Start project runs on Node.js 22.18 or later with srvx: any Node.js host, a container or your own server.

  1. 01

    Install

    npm install

    Installs TanStack Start, Rsbuild, React 19, motion and the packages the site's own code uses.

  2. 02

    Develop

    npm run dev

    Runs rsbuild dev: edit a view in src/views and the page updates.

  3. 03

    Ship

    npm run build && npm start

    Builds with Rsbuild, then serves the build with srvx on Node.js 22.18 or later.

Only in TanStack Start

What TanStack Start adds

File routes with head()

Each page's metadata sits in its route's head(), or in a head.json table beside it, and Start updates it on client navigation.

Typed routes

npm run typecheck generates the route tree TanStack Router types its routes with, then checks the project with TypeScript.

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 needs a Node.js server (22.18 or later): it is not a static export.

FAQ

Framer to TanStack Start, answered

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

Can I convert a Framer site to TanStack Start?

Yes. Deframer converts a published Framer site into a TanStack Start project written in TypeScript, which you download as a .zip and own: one file route per page, React components with CSS modules, CMS collections as JSON and native forms as API routes.

How does the TanStack Start project build and run?

It builds with Rsbuild (npm run build) and runs on srvx (npm start), on Node.js 22.18 or later. npm run dev starts the development server.

Where do page titles and descriptions go?

In each route's head() in src/routes/**/index.tsx, or its head.json table: title, description, Open Graph and canonical URL, as the published site has them.

Is the TanStack Start project different from the Next.js one?

Only in the routes, the server and the build. Pages, components, styles, CMS content and forms are the same React and TypeScript code in all five frameworks.

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 TanStack Start code.

  1. Convert
  2. Download
  3. Deploy anywhere