Deframer

Framer → Next.js, in seconds

Your Framer site, as a Next.js project you own.

Paste the URL of a published Framer site. Deframer converts it into a clean, editable Next.js + TypeScript project: real pages, components and styles you can read, change and deploy anywhere.

A published site: *.framer.website, *.framer.app or a custom domain.

Off: images, fonts and videos stay on Framer's CDN. On: they are downloaded into public/ (larger zip, slower).

  • Preview before you download
  • Nothing to install
  • Files deleted after 30 minutes

Compare before you download

Every conversion opens a live compare view: the original and the converted site side by side, with synced scrolling and navigation, at desktop, tablet and mobile widths.

How it works

Three steps, no setup

  1. Paste the URL

    Any published Framer site: *.framer.website, *.framer.app or your own domain. No Framer login or project access needed.

  2. Watch it convert

    Deframer reads the site's public files and rewrites every page, component and style as readable React. Most sites take seconds.

  3. Compare and download

    Check the result side by side with the live site, page by page and at every breakpoint. Then download the .zip and run npm run dev.

What you get

A project a developer would write

Not a static HTML export: a real Next.js app with the structure, names and tools you already use.

  • Next.js App Router

    One page.tsx per URL with its metadata, static params for CMS pages, and the sitemap and robots.txt as published.

  • TypeScript throughout

    Every file is .ts or .tsx, with human names for props, variants and layers instead of Framer's generated ids.

  • CSS modules

    Styles out of JavaScript: a .module.css beside each component, classes named after the layers and variants they style.

  • CMS as JSON

    Collections decoded into src/cms/*.json with a typed schema. Edit content in your editor, or wire up the CMS you prefer.

  • Forms on your own API route

    Forms post to app/api/forms/<name>/route.ts with validation, a honeypot and an optional webhook. Nothing goes to Framer.

  • Multi-language

    Localized sites keep their locales, URLs and translations: one app/[locale] tree and a file per language.

my-site/
├─ src/
│  ├─ app/            routes: page.tsx per URL
│  │  ├─ page.tsx
│  │  ├─ about/page.tsx
│  │  ├─ blog/[slug]/page.tsx
│  │  └─ api/forms/contact/route.ts
│  ├─ views/          home.tsx + home.module.css
│  ├─ components/     your design components
│  ├─ cms/            blog.ts + blog.json
│  ├─ locales/        translations per language
│  └─ styles/         tokens, text styles, fonts
├─ public/            robots.txt, sitemap.xml
├─ package.json
└─ README.md
Folders vary by site: a site without a CMS has no cms/ folder.

FAQ

Questions

What are the limits?
  • 5 conversions per 10 minutes per visitor, with up to 2 running at once.
  • A conversion can run for up to 10 minutes, and a project can be up to 1 GB.
  • Very large sites may not fit. Try again with "Include assets locally" off: images, fonts and videos then stay on Framer's CDN, which makes the download much smaller.
  • Conversions run a few at a time. When it's busy, yours waits in line and the page shows its place.
What happens to my files? (Privacy)

Each conversion is private to your account: only you can open its preview, compare view and download. The project and its .zip are deleted from our servers 30 minutes after the conversion finishes. After that, the conversion shows as expired, and you can convert the site again.

Deframer only reads what the site already publishes to every visitor. Those public files may be cached to make a second conversion of the same publish faster. Your account keeps your credit balance and conversion history; the converted project itself is never kept.

Which sites can I convert?

Any site published with Framer, on framer.website, framer.app or a custom domain. Use the address visitors open, not the editor link. Only convert sites you own or have permission to copy.

Should I include assets locally?

Off (the default), images, fonts and videos keep loading from Framer's CDN: the download is small and the conversion fast. On, they are downloaded into the project's public/ folder, so the site no longer depends on Framer at all. That takes longer and makes a bigger zip.

How close is the result to the original?

The converter aims to match the published site: layouts, breakpoints, animations, interactions and CMS pages. Use the compare view to check every page before you download. Code components and third-party embeds stay as the site's own code.

How do I run the project?

Unzip it, then run npm install and npm run dev. It needs Node.js and nothing from Framer. Deploy it anywhere Next.js runs.

Is Deframer affiliated with Framer?

No. Deframer is an independent tool. It is not affiliated with, endorsed or sponsored by Framer. "Framer" is a trademark of its owner and is used here only to describe which sites the tool converts.

Ready to own your site's code?

Paste a URL and get a Next.js project in seconds.

Convert a site