What Framer actually hands you
Search “export Framer to HTML” and you get a page of tools promising a one-click download. Start from the source instead: Framer's editor has no code export on any plan. What it does have is *copy component as code* (a React component for your own project, not a page), an asset exporter for JPG/PNG/SVG, and CMS export to CSV through plugins. The published website -- the thing your visitors load -- is rendered and served by Framer, and the pricing page never lists “code export” because it does not exist.
That is the whole reason this guide exists. If you want the site on a host you control, you either rebuild it by hand (weeks, and it will drift) or you capture the page the browser already receives and localize everything it depends on. The second is what LayerPort does; the rest of this page is how, and where it stops.
Source: Framer Help — Can I export my website to HTML and self-host it?
Framer's site plans, with the column that matters
| Plan | Price (yearly billing) | Pages | Bandwidth | Custom domain | Code export |
|---|---|---|---|---|---|
| Free | $0 | Design pages only | 1 GB | No — framer.website subdomain | No |
| Basic | $10 / mo | 30 | 50 GB | Yes | No |
| Pro | $30 / mo | 150, then $20 per 100 | 100 GB, then $40 per 100 GB | Yes | No |
| Enterprise | Custom | Custom | Custom | Yes | No |
Source: Framer — Pricing
What a published Framer page is made of
Open DevTools on any Framer site and you will see three things a naive copy never handles. First, the HTML you get is a hydration target: the DOM is there, but the interactivity, appear effects and scroll animations arrive as ES modules from framerusercontent.com/modules/… and framer.com/m/…, importing each other several levels deep. Second, every image is served from framerusercontent.com in multiple sizes through srcset, so one picture is five files. Third, the page ships one layout per breakpoint and a small <script id="__framer__breakpoints"> tag listing the media queries that decide which one is visible.
A rebuild means re-authoring all of that. A capture means taking it exactly as served and rewriting every reference so it resolves from your own folder. LayerPort's module resolver walks the import graph until it is closed -- with a ceiling of 1,500 modules per site, which no marketing site gets near -- and reports any edge it could not resolve rather than leaving a silent 404.
Where the bytes of a median page go
| Share | Value |
|---|---|
| Images | 911 KB |
| JavaScript | 632 KB |
| Fonts | 122 KB |
| CSS | 77 KB |
| HTML | 22 KB |
The thing you are copying, over ten years
| Item | Value |
|---|---|
| 2014 | 505 KB |
| 2022 | 2037 KB |
| 2023 | 2171 KB |
| 2024 | 2311 KB |
| 2025 | 2559 KB |
Source: HTTP Archive — Web Almanac 2025, Page Weight · HTTP Archive — Web Almanac 2024, Page Weight
The run, in the order it happens
Say the site is yours to move
Before a capture can be exported or synced you tick one box for that site: you own it, or you have permission to copy and transform it. Nothing is added to the source and no proof is demanded -- the confirmation is your statement, stored with the time and the run. It records what you told us; it does not create a right you did not already have, and capturing material you are not entitled to move breaches the acceptable use policy.
Capture the live URL
Paste the URL. Framer is detected from the markup, routes are discovered within your plan's page limit, and stylesheets, scripts, fonts, images and video posters come down into a portable tree. The capture is what the browser painted, at desktop, tablet and phone widths.
Review at three widths
Open the private preview and walk every route at the three breakpoints. Look at the things Framer does at runtime: sticky headers, appear effects, hover states. The compatible ones are preserved; anything that still needs the Framer runtime to *decide* something is flagged in the capture manifest.
Edit and optimize in place
Live Edit works on the real DOM: text, images, links, spacing, hiding or reordering sections. The optimizer re-encodes JPEG and PNG to WebP (and AVIF when it wins) at quality 82, only keeping a conversion that saves at least 10%, and adds
loading="lazy"below the fold. Every save is a version you can restore.Export the ZIP and deploy it
The sanitized export folds the mirrored hosts into
assets/{css,js,img,fonts,media,data}and addsvercel.json(cleanUrls, no trailing slash),netlify.toml, a_headersfile Netlify and Cloudflare Pages both read, and a README written for someone who has never deployed anything. Drop it on Vercel, Netlify, Cloudflare Pages or an Nginx box -- the self-hosting guide below covers each.
What the files cannot carry
Before you hand it to anyone
- Every route in the sitemap opens from the exported folder on a local server, offline.
- DevTools Network, filtered to
-domain:127.0.0.1, shows nothing after load except services you chose (analytics you added, a form endpoint). - The three breakpoints match the live site at 1280, 1024 and 390 px -- especially the phone menu.
- Fonts render as the design intended; no Georgia or Arial fallback where a Framer font should be.
- The
README.mdin the ZIP describes the host you actually chose.
Keeping it alive after the export
The site will change in Framer; that is fine. Source Sync captures it again, keeps the pre-sync tree as a same-volume backup, and puts your saved layers -- text edits, uploaded images, hidden sections, renamed routes -- back on top of the new capture. Anything it cannot place with confidence lands on a review list instead of being guessed. How Source Sync preserves your edits walks the order it applies things in.
For a single site that will not change much, the Site Pass ($49 once) is the whole run. If you maintain several client sites, Solo ($19 / mo) adds Source Sync and ten saved versions; Studio ($49 / mo) adds the forms inbox and larger limits. Prices are on the pricing page and in the plan catalogue the app enforces -- this guide does not invent its own.