See your Framer landing page running as code, free. Lifetime: $39 once until 1 November. Preview my site →
Log inSign up
Free preview · no card

Any Framer template.
Your code. One link.

Found a Framer template you love? No need to buy it. Paste its link and get the whole thing as a Next.js codebase: every page, animation and CMS item. Make it yours, host it anywhere.

Already have Lifetime? Export from your terminal or your agent. How it works

Export my Framer site to a Next.js project with deframer. First read https://deframer.dev/llms.txt and follow it.
1. Run `npx deframer@latest login` and wait while I sign in with Google in the browser.
2. Run `npx deframer@latest create <my site URL> ./site` with a 10-minute timeout. If it stops early, run the same command again: it picks the build up.
3. Start it with `cd site && pnpm dev` and tell me the local address.
My Framer site is:

Paste this into Claude Code or Codex and add your site's address. It does the rest. On Claude Code, run npx deframer@latest skill --install once and just ask.

yoursite.framer.website
[ HOME.JS ]
export default function Page() {
  const Hero = <motion.section />
  const Features = <Grid />
  const Pricing = <Plans />
  return <>{Hero}{Features}{Pricing}</>
}
// every text → content.overrides.json
Reading your site: 11 pages…

Host it anywhere. Edit it with anything.

VercelNetlifyCloudflareCoolifyDockerClaude CodeCursorGitHub
[ 01 / 06 ]How it works

From Framer to Next.js in minutes

Any Framer template, any Framer site. Just the link: no plugin, no Framer account, no template to buy.

1. Sign in

npx deframer@latest login opens your browser. Sign in with Google, once per computer.

Learn more

2. Export

Paste the link of any Framer template or site. deframer create builds every page and downloads the codebase.

Learn more

3. Run it

Packages come installed. Run pnpm dev and your site is live on your machine.

Learn more

4. Keep it in syncNEW

Changed something in Framer? deframer sync pulls it in and keeps your edits.

Learn more 
# sign in, then build on deframer's server
npx deframer login

npx deframer create https://yoursite.framer.website ./site
cd site && pnpm dev
[ OUTPUT ]
{
  "source": "https://yoursite.framer.website",
  "pages": 11,
  "sections": ["Hero", "Features", "Pricing"],
  "builds": true
}
[ 02 / 06 ]Agent ready
// Agent ready//

Built for your
AI agent

Paste one prompt into Claude Code or Codex and it does the export. Every project comes with an AGENTS.md map, so your agent knows where each page, text and image lives. Use with AI agents

One prompt. Your agent signs in, exports the site and starts it. Then ask for changes in plain words: it finds sections, texts and images by name.

Export my Framer site to a Next.js project with deframer. First read https://deframer.dev/llms.txt and follow it. 1. Run `npx deframer@latest login` and wait while I sign in with Google in the browser. 2. Run `npx deframer@latest create <my site URL> ./site` with a 10-minute timeout. If it stops early, run the same command again: it picks the build up. 3. Start it with `cd site && pnpm dev` and tell me the local address. My Framer site is: https://yoursite.framer.website

Named, not numbered. Sections are called Hero, Features and Pricing in the code, not div 47.

framer/site/pages/home.js

const Hero = … const Features = … const Pricing = …

[ 03 / 06 ]Faithful
//Same site, new home//

Looks like your site.
Works like your site.

deframer runs Framer's own runtime inside your app, so nothing has to be rebuilt by hand.

What carries over

Check it yourself. deframer verify opens your live site and your export side by side at desktop, tablet and phone width, and scores how closely they match.

How the check works
AnimationsHovers, scroll effects and page transitions, run by Framer's own runtime.
BreakpointsDesktop, tablet and phone layouts, at the same widths as on Framer.
CMSEvery collection page, with its content, ready to edit.
Images and fontsDownloaded into your project. No Framer CDN needed.
Nothing to set up

Built on our server. You only need Node. The terminal shows each step while your site is built, then hands you a project that runs.

What happens during an export
StepRuns onTakes
deframer loginyour browseronce
deframer createour servera few minutes
downloadyour computerseconds
pnpm installyour computerdone for you
pnpm devyour computernow
[ 04 / 06 ]Make it yours

Not a wall of divs. A project you can edit.

Laid out so you, or your agent, can change texts, images and colours in minutes.

Named sections. Hero, Features, Pricing: every part of a page has a name in the code.

Every text in one file. Change any headline in content.overrides.json. No code needed.

Every image listed. MEDIA.md shows each image with its page and layer. Swap one in seconds.

Colours in one place. theme.css holds the palette. Recolour the whole site from there.

Sync without losing work. Pull Framer changes any time. Your edits are kept, and any clash is listed.

Never a dead end. If one part can't be converted, you still get a working site. DEFRAMER_REPORT.md says what was left out, and we fix it on our side.

Keep designing in Framer.
Own the code.

Your pages, your animations, your CMS, as a Next.js app on your own domain. Pull in Framer changes whenever you like.

Preview my site free Read the docs
$0Previewyour landing page, live
$39Lifetimeonce, until 1 November
1 commandTo exportevery page of your site
30 daysMoney backno questions asked
[ 05 / 06 ]Pricing

Preview free. Pay once for the code.

See your landing page running as code before you pay. Lifetime exports every page of every site you own, forever. 30-day money-back guarantee.

Free preview

$0

See your landing page running as code.

Preview my site
  • Your landing page, live
  • Every animation and interaction
  • No card

Lifetime

LAUNCH PRICE

$39once$99 from 1 November

Every site you own, as code, for as long as deframer exists.

Start with a free preview
  • Unlimited sites, every page
  • Clean Next.js code you own
  • Re-sync forever
  • Every future feature
  • Pay once, no subscription
[ 06 / 06 ]FAQ

Frequently asked questions

Still unsure? Read the docs or write to [email protected].

How it works

A Next.js project with every page of your site, its images and fonts, installed and ready for pnpm dev. Sections are named in the code, every text is in one file, and AGENTS.md explains the layout to your AI agent.

No. deframer reads your published site, the same way a browser does, so there's nothing to install in Framer.

No. Copy the link of any Framer template you like, paste it into deframer, and you get the whole thing as a Next.js codebase you can rebrand, extend and host anywhere.

Yes. deframer runs Framer's own runtime inside your app, so animations, breakpoints and CMS pages work as they did on Framer. deframer verify scores how closely your export matches.

You still get a working project. deframer leaves out only that part (it shows as an empty space of the same size), lists it in DEFRAMER_REPORT.md, and we fix the converter. Run deframer sync later to get it back.

Yes. Run deframer sync in the project to pull in your changes. Files you edited are kept, and any clash is listed.

Node 20 or newer and a Google account. The export runs on our server, so there is nothing else to install.

Yes. Paste the prompt from the top of this page into Claude Code or Codex. It runs the same commands for you.

Plans

A live preview of your landing page, converted by deframer, with every animation and interaction. No card needed. Links to other pages and forms are off in the preview.

$39 once until 1 November, then $99. One payment, no subscription.

Every page of every site you own, as Next.js code. Re-sync forever, and every feature we add later, for as long as deframer exists.

Write to us within 30 days of paying for a full refund, no questions asked.

You do. Host it on Vercel, Netlify, your own server or anywhere else, and change anything.