Deframer

Framer to code

Framer to Vite. A static site, no server.

Paste your Framer site's address and get a static Vite and React site in TypeScript: every page prerendered into dist/ at build time, React components with CSS modules, your CMS as JSON. Upload dist/ to any static host.

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

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

What you get

A static Vite project prerendered into dist/

src/routes.tsx lists the routes, and scripts/prerender.ts writes each page's HTML where a static host looks for its URL. The pages, components and styles are the same as in every other framework.

Project structure
src/
  routes/         Route modules: one index.tsx per URL, with its <PageHead>
  routes.tsx      Each URL pattern and its module, loaded on demand
  root.tsx        Each page in its layout template, the 404 page
  main.tsx        The browser's entry: hydrates the prerendered page
  entry-server.tsx  A page's HTML at build time
  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    Every page into dist/: about.html for /about, 404.html
public/           _redirects, robots.txt, sitemap.xml, assets kept in the project
index.html        The document every page is written into
vercel.json       Vercel: clean URLs and the site's redirects
vite.config.ts
scripts/prerender.ts
Runs after vite build and writes every page into dist/ as a flat file at its URL: about.html for /about, index.html for /, the 404 page as 404.html.
src/routes/**/index.tsx
One route module per page, with its title and description in <PageHead>; CMS items take theirs from a head.json table.
public/_redirects, vercel.json
The site's redirects for Netlify and Cloudflare Pages, and for Vercel; for hosts with neither, a page at each old URL sends the browser on.
src/site/forms.ts
Each form's endpoint, read at build time: a form service's URL in VITE_FORM_ENDPOINT, or netlify for Netlify Forms.

Run and deploy

Unzip, install, run. Nothing from Framer.

A Vite site is its dist/ folder: upload it to any static host, such as Netlify, Cloudflare Pages, Vercel, GitHub Pages or an S3 bucket behind a CDN. Nothing runs on a server, and production needs no Node.js.

  1. 01

    Install

    npm install

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

  2. 02

    Develop

    npm run dev

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

  3. 03

    Build

    npm run build

    Builds with Vite and prerenders every page into dist/, on Node.js 22.18 or later; npm run preview serves dist/ as a static host does.

Only in Vite

What Vite adds

No server

Every page, CMS items included, is an HTML file in dist/, styled before its scripts run, then hydrated in the browser. Links open the next page in the same document with React Router, and the layout template two pages share stays mounted.

Redirects on any host

The site's redirects come as public/_redirects for Netlify and Cloudflare Pages and vercel.json for Vercel, and, for hosts with neither such as GitHub Pages, as a page at each old URL that sends the browser on.

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.
  • There is no server: forms post to a form service you set in VITE_FORM_ENDPOINT, or to Netlify Forms, and a split test ships its original version only.
  • A CMS item added after the conversion has no prerendered page: it renders in the browser from 404.html, with the 404 status, until you convert again.

FAQ

Framer to Vite, answered

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

Can I convert a Framer site to Vite?

Yes. Deframer converts a published Framer site into a static Vite and React site written in TypeScript, which you download as a .zip and own: npm run build prerenders every page into dist/, with the same animations, interactions and CMS content, and any static host serves it.

Where can I host the static site?

Anywhere that serves static files: Netlify, Cloudflare Pages, Vercel, GitHub Pages or an S3 bucket behind a CDN. Each page is an HTML file at its URL (about.html for /about); Netlify, Cloudflare Pages and GitHub Pages serve it at /about, and the project's vercel.json turns that on for Vercel.

How do forms work without a server?

Each native form posts its fields to a form service, such as Formspree or Basin, whose URL you set in VITE_FORM_ENDPOINT (or a form's own variable) when you build. On Netlify, set it to netlify and Netlify Forms receives them.

What happens to redirects and split tests?

Redirects come as public/_redirects (Netlify, Cloudflare Pages), vercel.json (Vercel) and a redirect page at each old URL for hosts with neither. A split test needs a server to pick each visitor's variant, so the static site ships the tested page's original version.

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

  1. Convert
  2. Download
  3. Deploy anywhere