How to Export Your Framer Website to HTML (Step-by-Step)

You have built a stunning website in Framer, the animations are smooth, the layout is pixel-perfect, and everything looks exactly the way you envisioned it. But now you need to move beyond the Framer ecosystem, whether to hand off clean code to a developer, host it on a custom server, or integrate it into a larger project. This is where knowing how to export your Framer website becomes an essential skill.

While Framer is widely celebrated for its powerful design and prototyping capabilities, many users find the export process less straightforward than expected. The platform has specific workflows and limitations that can trip up even experienced designers if they are not familiar with the options available.

In this guide, you will get a clear, step-by-step walkthrough of how to export your Framer website to HTML. We will cover the built-in export settings, what to realistically expect from the output, and a few practical tips to help you avoid common pitfalls. By the end, you will have everything you need to confidently take your Framer project outside the platform and deploy it on your own terms.

Why Framer Has No Native Export Option

If you have ever tried to take your Framer site and host it somewhere else, you have already discovered the problem firsthand. Framer officially confirms that it does not offer HTML export for self-hosting, stating plainly: "Framer does not provide a way to export published sites as HTML files or static website bundles." The platform cites genuine technical dependencies, including server-side rendering, dynamic image resizing, font subsetting, and global CDN caching, all of which are tightly bound to Framer's own infrastructure. However, the architectural complexity is only part of the story.

The Business Model Behind the Lock-In

The more straightforward explanation is economic. Framer's recurring hosting fees, which range from approximately $10 to $100 per site per month, represent the core of its revenue model. A platform that allows frictionless export eliminates its own retention mechanism. This is not unique to Framer; according to a 2026 comparison of no-code export tools, Framer ranks alongside Wix as the most locked-down major no-code platform, offering zero native export capability. Even Webflow, which provides partial code export on paid plans, excludes CMS content and complex interactions from that output.

Platform Constraints That Force the Issue

Beyond the hosting dependency, several hard platform limits accelerate the need to export. Framer's CMS is capped at 1,000 items per collection, the platform offers no native e-commerce functionality, and there is no pathway to migrate your published site to independent infrastructure without third-party tooling. For growing businesses, these constraints become operational blockers rather than minor inconveniences.

Who Actually Needs to Export

Three use cases consistently drive export demand. First, static hosting arbitrage: deploying a Framer site once to Cloudflare Pages, Vercel, or an S3 bucket eliminates ongoing hosting costs entirely, and the math favors export quickly. Second, agency client handoff requires delivering clean, ownable code rather than a platform subscription the client did not ask to maintain. Third, compliance and site ownership archiving matter for businesses operating under data portability regulations, including the EU Data Act that became effective in September 2025. With over 260,000 websites currently built on Framer per BuiltWith data, and AI-assisted design tools continuously lowering the barrier to building on the platform, the volume of users eventually hitting these walls is growing at pace. Third-party export tooling is not a workaround; for Framer users, it is the only viable path out.

What a Quality Framer Export Actually Looks Like

Not all exports are created equal. Before committing to any third-party export tool, it is worth establishing a clear benchmark for what the output should actually deliver. A substandard export can appear functional at first glance while hiding critical failures that only surface during a client review, a search audit, or a performance test.

Pixel-Perfect Visual Fidelity

The first and most visible standard is that the exported HTML and CSS must reproduce the live Framer site exactly. No shifted elements, no collapsed sections, no missing components. This is harder to achieve than it sounds because Framer sites hydrate using React internals on load. A naive scrape causes React to attempt a takeover of the page, fail silently, and return a blank screen. Scroll animations compound the problem further, as Framer applies opacity: 0 by default to animated elements, leaving entire content sections invisible in a poorly handled static export. A quality output resolves both issues before the files reach your hands.

Localised Assets with No External Dependencies

Every image, font, video, and media file must be downloaded and stored locally within the exported file structure. Hotlinks back to Framer's CDN are a ticking clock: if your subscription lapses, if Framer changes its infrastructure, or if the platform is discontinued, every remotely referenced asset breaks simultaneously across every page. Beyond availability risk, CDN-dependent exports also fail basic offline testing, which is often the first check a developer will run after receiving a handoff package. Font licensing is a related consideration; confirm that any premium typefaces bundled in your Framer project are cleared for self-hosting before deploying them elsewhere.

SEO Metadata and Structured Data Intact

Title tags, meta descriptions, canonical URLs, Open Graph tags, and JSON-LD structured data must all survive the export without modification. These elements exist within Framer's managed hosting environment and do not travel automatically when a site is extracted without dedicated metadata handling. Losing them in a handoff erases accumulated search equity immediately, and rebuilding it takes months.

Animation Fidelity and Interaction Behaviour

Hover states in Framer are applied via JavaScript rather than CSS, which means they disappear entirely in a naive static export. Scroll triggers and entrance animations depend on Framer's proprietary runtime, so the exported files must either replicate that behaviour in clean JavaScript or replace it with equivalent CSS transitions. The premium, motion-rich feel that justifies building on Framer in the first place relies entirely on this being handled correctly.

Watermark Removal

The "Made with Framer" badge persists on exported pages unless the export tool explicitly strips it during processing. In an agency handoff or white-label delivery scenario, a visible platform attribution badge is commercially unacceptable to most clients. Watermark removal should be confirmed as a named feature of whichever export solution you choose, not assumed.

Step-by-Step: How to Export Your Framer Website

With a clear understanding of what a quality export looks like, you can now move through the process systematically. The following five steps take you from a live Framer project to a fully deployed static site.

Step 1: Prepare Your Framer Project

Before touching any export tool, your Framer site must be published and accessible via a live URL. Export tools work by crawling the rendered, publicly available version of your site, not the editor preview or draft state. If your site is still in draft mode or unpublished, the crawler will either return incomplete results or fail entirely. Your published URL can take the form of a native Framer subdomain such as yoursite.framer.website or a custom domain you have connected through Framer's project settings. Either format works as a valid crawl target.

Once the site is live, conduct a structured pre-export audit. Navigate through every page manually and confirm all internal links resolve correctly. Review any CMS collections and ensure the pages they power are publicly accessible, since gated or password-protected pages cannot be captured by an external crawler. It is also worth noting at this stage that Framer forms submit to Framer's own backend infrastructure. After migration, those forms will stop functioning, so plan to replace them with an external form service before or immediately after the export.

Step 2: Choose Your Export Tool

Framer offers no native export path, which means you are relying entirely on a third-party tool to do the heavy lifting. The leading tools in this category use a headless browser engine to visit each page of your published site, render the JavaScript, and convert the output into portable static files. When evaluating options, prioritise tools that handle SEO metadata preservation, asset localisation (downloading images and fonts rather than hotlinking to Framer's CDN), and CMS page crawling out of the box. You can compare dedicated Framer-to-HTML export tools to assess which features align with your project requirements.

Once you have selected a tool, the configuration process is straightforward. Paste your live Framer URL into the tool's interface and set your export parameters. Key options to review include crawl depth (how many levels of linked pages the tool will follow), asset handling preferences, and whether the tool strips proprietary Framer badges or tracking scripts from the output. Most tools default to a crawl depth of three levels, which is sufficient for the majority of marketing sites and portfolios.

Step 3: Run the Export

With your URL submitted and options configured, initiate the export. Leading tools in this category complete a full export in approximately 30 seconds for a standard 10-page site, making this one of the fastest steps in the entire workflow. During the run, the headless browser visits each discovered page in sequence, scrolls through the viewport to trigger any lazy-loaded content, renders all JavaScript including animations and dynamic elements, and downloads every referenced asset. Internal links are rewritten to relative paths so the output functions correctly without a server, and all asset URLs are updated to point to locally stored files rather than Framer's CDN.

One important technical nuance: Framer sites use opacity animations tied to scroll position, meaning a naive scrape can produce pages where large sections appear invisible. Quality export tools account for this by executing scroll simulation and interaction triggers before capturing the page state. When the run completes, the tool packages everything into a downloadable ZIP archive with a structured directory containing HTML files for each page, compiled CSS, JavaScript modules, and an assets folder.

Step 4: Verify the Output

Download and unzip the exported archive, then open the HTML files directly in a browser using a local server. Do not simply double-click the files, as relative asset paths require a proper localhost environment to resolve correctly. With the local version running, open your live Framer site in a second browser tab and compare layouts, typography, spacing, and imagery page by page. Pay particular attention to sections that use scroll-triggered animations or hover interactions, as these are the most common points of fidelity loss.

Beyond visual checks, inspect the source of each exported HTML file and confirm that the <head> section contains the correct title tag, meta description, canonical URL, and any JSON-LD structured data that was present on the live site. Verify that image and font src attributes reference local paths within the /assets folder rather than external CDN URLs. If any assets are still hotlinked, they will break as soon as Framer's CDN is no longer involved.

Step 5: Deploy to Your Target Host

Once the output passes verification, deployment takes only a few minutes using any of the major static hosting platforms. For the fastest path to a live URL, drag the exported folder directly into Netlify Drop and your site will be live on a Netlify subdomain within seconds, with the option to attach a custom domain immediately. For global performance without configuration overhead, connect the folder to a Cloudflare Pages project and benefit from free edge caching across Cloudflare's worldwide network. If your team works in GitHub, push the exported folder to a repository and link it to a Vercel project for continuous deployment; every subsequent re-export and push will trigger an automatic rebuild. All three platforms offer generous free tiers that make the hosting cost negligible compared to Framer's subscription pricing.

Exporting Framer CMS Pages: What You Need to Know

Framer's CMS is one of the platform's most powerful features, enabling dynamic blogs, portfolios, event listings, and career pages built from structured collections. However, it introduces a significant complication when you attempt to export your site as static HTML.

How CMS Pages Are Generated

Collection item pages in Framer are dynamically rendered at runtime. When a visitor loads a blog post URL, Framer generates that page on the fly by combining a template with the corresponding CMS record. This means a basic HTML snapshot of your site will only capture the template shell, not the hundreds of individual rendered pages behind it. A naive export leaves you with an empty structure and missing content for every collection item you have published.

A quality export tool solves this by actively crawling your site rather than simply downloading what is visible at the top level. It starts from your sitemap and index pages, follows every internal link it discovers, and renders each CMS-generated URL as a fully resolved static HTML file. The result is a complete, deployable site where every blog post, case study, or product page exists as its own self-contained file.

Practical Limits and What They Mean for You

Framer caps each CMS collection at 1,000 items. While that boundary is worth noting for large-scale publishers, it also means a thorough export tool can realistically capture every published CMS page on your site with no truncation. Nothing falls through the cracks as long as the tool is built to handle dynamic URL discovery correctly.

Once exported, those CMS pages become standard static HTML files. No database is required, no Framer runtime is called, and pages load directly from whichever host you deploy to, whether that is Netlify, Vercel, Cloudflare Pages, or a private VPS. Framer confirms that published output uses open web standards and carries no platform dependency once removed from Framer's infrastructure.

The Verification Step You Cannot Skip

Before purchasing any export tool, verify explicitly that it supports dynamic CMS page crawling. Several tools on the market export only top-level pages and skip collection item URLs entirely, which renders them functionally useless for CMS-heavy sites. Ask the vendor directly, check their documentation for language around "CMS support" or "collection pages," and test with a free tier if one is available. This single check will save you significant time and frustration after purchase.

Preserving SEO When You Export a Framer Site

A clean export preserves your site's visual integrity, but SEO integrity requires a separate set of checks that many teams overlook until rankings drop.

Canonical Tags: The Silent Duplicate Content Trap

The most common SEO failure after exporting a Framer site is broken canonical tags. When a third-party tool scrapes your published Framer site, the canonical <link> elements embedded in each page's <head> may still reference your original Framer-hosted domain, for example yoursite.framer.website, rather than your new deployment URL. Search engines reading those hardcoded canonicals will interpret your newly deployed site as duplicate content and suppress it from rankings entirely. Before pointing your domain at any exported build, open the raw HTML of at least three pages and manually verify that canonical URLs reflect your destination domain. None of the major export tools explicitly document canonical rewriting as a guaranteed step, which means this check must remain a manual responsibility on your side.

Structured Data and Asset Path Integrity

JSON-LD structured data blocks present a second, less obvious risk. Export tools that aggressively strip <script> tags to remove Framer's React hydration code can silently delete <script type="application/ld+json"> blocks in the same pass. Those blocks contain your schema markup for articles, products, FAQs, and breadcrumbs, and losing them costs your site its rich result eligibility in Google Search with no visible warning. Verify that every structured data block survives the export by searching the output HTML for application/ld+json before deployment.

Asset paths introduce a third failure mode. If an export tool writes absolute CDN URLs pointing back to Framer's infrastructure rather than bundling images and fonts locally, those assets break the moment Framer hosting is cancelled. Broken images degrade Largest Contentful Paint directly, pulling Core Web Vitals scores down and signalling a poor user experience to Google's ranking systems. A quality export tool downloads all assets locally and rewrites paths to be relative, removing any dependency on Framer's servers.

Post-Export SEO Audit Checklist

Before going live, run your HTML output through Google Search Console's URL Inspection tool or a local Screaming Frog crawl to audit title tags, meta descriptions, canonical URLs, structured data blocks, and internal link paths in a single pass. Flag any pages where title tags are missing, canonical URLs still reference the Framer domain, or internal links contain absolute paths pointing to the old host. This audit takes under an hour on a ten-page site and prevents ranking losses that can take months to recover from.

The performance SEO benefit of a clean export is also measurable. Framer ships a full React runtime to deliver what could otherwise be a static HTML file. Removing that platform overhead after export has produced 90+ PageSpeed scores on exported sites, a result that is structurally impossible while the site remains on Framer's hosting infrastructure. Faster pages reduce bounce rates, improve Core Web Vitals, and directly support organic ranking positions, making the SEO case for exporting as strong as the cost and ownership case.

Common Framer Export Problems and How to Fix Them

Even with the right export tool in place, specific technical issues can surface between export and deployment. Knowing how to diagnose and resolve each one will save you significant time and prevent silent failures that only appear in production.

Broken Relative Paths

This is the most common issue teams encounter after their first export attempt. Framer builds sites as React applications that load assets directly from Framer's CDN, so a low-quality export will preserve those absolute CDN URLs in the output HTML rather than rewriting them to local relative paths. The result is a site that renders correctly on the first load but breaks silently if CDN availability changes, and one that cannot be self-hosted cleanly. The fix is straightforward: choose an export tool that explicitly localises all assets during the crawl phase. If you have already run an export and need a quick correction, open the output folder in a code editor with global find-and-replace support and replace all instances of the Framer CDN base URL with the appropriate relative path prefix before deployment.

Missing Web Fonts

Framer delivers custom fonts through its own font infrastructure, and those font files will not travel with your export unless the tool is specifically built to download and bundle them. After export, open the CSS file in your output folder and search for @font-face declarations. Each declaration should reference a local file path rather than a remote URL. Then confirm those font files are physically present in the output directory. If they are missing, either re-run the export with a tool that bundles font assets, or manually download the font files and update the @font-face src paths accordingly.

CMS Pages Not Crawled

Collection item pages are dynamically generated routes, and many export tools only capture top-level static pages. If your /blog/post-title or /case-studies/client-name URLs return 404 errors after deployment, the exporter did not crawl those routes. Re-run the export using a tool with explicit CMS crawling support. Alternatively, compile a list of all collection item URLs manually and add them to the crawl scope before re-running.

Animations Not Rendering Post-Export

Scroll-triggered animations in Framer often set elements to opacity: 0 by default, with JavaScript toggling visibility on scroll. If the export tool strips those script dependencies, the affected content simply becomes invisible in the static output rather than animating in. After export, verify that all referenced JS files are present in the output folder and that the animation-related classes are intact in the HTML. A quality export tool will either retain the original scripts or substitute lightweight vanilla JS equivalents that replicate the same behaviour.

Watermark Still Present

The "Made with Framer" badge is injected entirely through JavaScript, not hard-coded into the page markup. If the badge appears in your exported site, the tool has not stripped it. Watermark removal is a paid-tier feature across virtually all export tools and is not available on free plans. Upgrading to a paid tier is the only reliable resolution; manual removal by editing the output JS is technically possible but time-consuming and fragile across future exports.

Using Framer Export for Agency Client Handoffs

Agency client handoff has become one of the fastest-growing use cases for Framer export tools in 2026, and the reason is straightforward. Once a client has signed off on a Framer design, they rarely want an ongoing platform subscription appearing on their invoices month after month. Framer's paid plans run from $19 to $39 per month per site, which scales quickly across an agency portfolio. Ten client sites can translate to $2,280 to $4,680 in annual recurring fees, costs that either erode agency margins or create friction when passed to clients who have no direct relationship with the platform.

Delivering a Self-Contained Codebase

A clean HTML export resolves this tension by giving agencies something genuinely ownable to hand over. Rather than transferring a Framer account or negotiating subscription transfers, you deliver a production-ready, self-contained codebase that the client's internal team or hosting provider can manage independently. No Framer account is required, no subscription renews in the background, and the client is not dependent on a third-party platform remaining operational or maintaining its current pricing structure.

Compliance and Archival Value

For clients in legal, finance, or enterprise sectors, an exported static HTML snapshot carries additional value beyond cost savings. A live Framer-hosted URL reflects the current state of a site and cannot serve as a verifiable point-in-time record. An exported archive, timestamped and stored, satisfies record-keeping requirements and legal hold obligations that dynamic hosted pages simply cannot meet. This positions the export deliverable as a compliance asset, not just a technical convenience.

Scoping the Handoff Correctly

When scoping a handoff engagement, confirm that the export tool you select covers every page type the client has approved. Top-level pages are typically straightforward, but blog or news CMS pages, dynamic collection pages, and any landing pages built as separate Framer projects all need to be included in a single consolidated package. According to 2026 export tool rankings, tools with strong CMS crawling capabilities handle nested and dynamic pages reliably, though verifying this against your specific site structure before finalising the deliverable remains a necessary due-diligence step.

Tools purpose-built for agency workflows handle the full export-to-deliverable pipeline, including asset localisation and metadata preservation, which significantly reduces post-export cleanup time before a package is ready for client handoff.

Getting Your Framer Site Out the Right Way

Framer's decision to block native HTML export is a deliberate architectural choice, not a missing feature on their roadmap. The platform's business model depends on recurring hosting revenue, so every Framer site you build is designed to stay within their infrastructure permanently. A purpose-built export tool is the only reliable path to a self-hosted, deployment-ready HTML package. Attempting a manual workaround, such as saving page source or running a basic scraper, will produce broken output because Framer sites are React applications that require full headless browser rendering to resolve correctly.

When evaluating export tools, prioritise those that deliver on four non-negotiable requirements: complete asset localisation so no files remain hotlinked to Framer's CDN, full preservation of SEO metadata including canonical URLs and JSON-LD structured data, deep crawling of CMS-generated pages beyond top-level routes, and automatic removal of the Framer watermark as part of the standard export flow.

The workflow itself follows a clear sequence. Confirm your Framer project is published and all pages are live before initiating any crawl. Run the export through your chosen tool, verify the downloaded output using a local server such as npx serve to catch broken asset paths or non-functional interactive elements, and then deploy to Netlify, Cloudflare Pages, or Vercel using their free static hosting tiers.

SiteFreeze manages this entire process for Framer sites, handling crawling, rendering, asset packaging, and metadata preservation in a single workflow that delivers a clean, deployment-ready HTML package. Run a free export first to evaluate output quality against your site's specific requirements before committing to a paid plan.

Conclusion

Exporting your Framer website to HTML does not have to be an overwhelming process. Once you understand the built-in export options, set realistic expectations for the output, and apply a few key preparation steps, the entire workflow becomes far more manageable.

To recap the essentials: always review your project settings before exporting, understand that some interactive elements may require manual adjustments, and test your exported files across multiple browsers before deploying. A little preparation upfront saves significant debugging time later.

Now it is your turn to put these steps into action. Open your Framer project, follow the walkthrough outlined in this guide, and take your website beyond the Framer ecosystem with confidence. Whether you are handing off to a developer or launching on a custom server, you now have the knowledge to do it cleanly and efficiently.