How to export a Framer site to real code

Framer is a good place to design a site and a bad place to leave one. The moment you need a server route, a CI pipeline, a component library your team already owns, or simply the ability to grep your own copy, you discover the thing every Framer user eventually discovers: there is no "export to code" button, and there never has been.

What Framer actually gives you

Three things, none of which is source. You can publish to a framer.website subdomain or a custom domain. You can export static assets — images, fonts — one at a time. And you can copy a component out of the canvas as Framer-flavoured React that only compiles inside Framer, because it imports from the Framer runtime.

What you cannot get is the page: the layout, the breakpoints, the motion, the design tokens, as files you own.

The three ways people try to get out

• Rebuild by hand. Highest fidelity if you are disciplined, and the most expensive. A designer-week per page is normal, and the motion is usually the part that gets dropped.
• Scrape the published HTML. Fast and brittle. You get a snapshot of one viewport with Framer class hashes intact, no components, and no breakpoints — fine for a landing page you will never touch again.
• Recover from the published bundle. Framer ships source maps and a fiber tree. If you walk them you can rebuild the actual component structure rather than guessing at it from the DOM.

Why the bundle is the interesting one

A published Framer site is a React app. The runtime keeps a fiber tree describing every node, its props, and its layout constraints. Framer also publishes source maps for its chunks. Between the two, the component boundaries the designer drew are recoverable — not inferred from nesting, but read from the build.

That is the difference between a clone that looks right and a codebase you can edit. A DOM scrape gives you one div soup. Walking the fiber tree gives you the tree the design was built as.

What "pixel perfect" should mean

Any tool can claim it. Ask for the diff. Every clone we publish ships a pixel and DOM comparison against the live original, and the numbers sit on a public page rather than behind a paywall — currently 19 Framer sites, best 0.00% pixel difference, 9 under 1%.

A tool that will not show you a failing run is showing you a marketing page, not a measurement.

What you should expect to fix by hand

Anything the browser never ran. Form handlers pointed at Framer’s backend, CMS collections, and password-gated pages are configuration rather than markup, and no capture recovers them. Budget for rewiring those; budget nothing for the layout.