Published output hides the component system
Rendered HTML, CSS, JavaScript, and assets show the finished page. The reusable React components, design tokens, breakpoint rules, and editing guidance still need to be created for the new website.
Export Framer site into editable Next.js code.
Export Framer site designs into an owned Next.js website your team can update with Claude Code, Codex, or Cursor. Use the published site and CMS data as migration inputs, keep the visual details and key URLs, then launch from the Agentic Website Template with search and release checks already connected.
Exporting the page files leaves the real migration unfinished.
A Framer website combines the canvas with managed rendering, image optimization, font delivery, CMS Collections, forms, localization, redirects, and hosting. Moving to an editable Next.js website means giving each part a clear home in the new repository.
Use the templateCMS data is only one part of each Collection page
Plugins can move Collection data into CSV or JSON. The new site also needs fields, references, slugs, rich text, images, filters, localized routes, and a publishing workflow.
Framer services need new owners
Forms, webhooks, redirects, custom fonts, analytics, code components, and Motion effects all need to be mapped, rebuilt, reconnected, and tested before the domain moves.
Turn your Framer site into a website your team owns.
Use the Agentic Website Template as the new foundation. Your AI coding agent can study the published site, recreate its design in clean Next.js components, move the content, and connect the services your marketing team needs after launch.
See the three ways to use the templateRecreate the canvas, breakpoints, and Motion effects.
Keep the Framer design
The site-clone workflow uses the live website as its visual reference. It captures detailed layouts, component states, responsive behavior, hover interactions, scroll effects, and page transitions for review.
- Compare desktop, tablet, and mobile layouts
- Record Motion effects and interactive states
- Review the homepage before scaling the build
Give your AI coding agent the context to keep editing.
Own the editing workflow
Brand voice, design rules, goals, examples, reusable components, and agent instructions live beside the code. Claude Code, Codex, or Cursor can use that context for the next page request.
- Keep project guidance in the repository
- Turn approved patterns into reusable components
- Review every change as working code
Give Framer Collections a durable publishing home.
Move CMS content
Map exported fields and items into a content model that supports dynamic routes, rich text, images, references, metadata, and internal links. The included blog provides a working publishing pattern.
- Map Collection fields and references
- Rebuild dynamic and localized routes
- Connect the content source your team will use
Carry useful URLs and search signals into Next.js.
Keep pages visible
The Next.js build renders important copy and links in HTML. Clear routes, metadata, canonical URLs, structured data, sitemaps, and direct redirects help search engines and AI systems understand the new site.
- Map every public and localized Framer path
- Preserve page titles, descriptions, and links
- Add direct redirects for changed URLs
Check the services the Framer export cannot carry alone.
Reconnect and test
Reconnect form delivery, analytics, custom scripts, font files, and integrations. Then test routes, redirects, mobile layouts, motion, crawl access, and production settings before moving the domain.
- Test form delivery and tracking
- Confirm font licenses and loading
- Run launch checks before the domain move
How to export a Framer site into the starter.
Start with the published website and exported content. Let your coding agent build one complete page in the Agentic Website Template, review the result, and use the approved system for the rest of the site.
Start with the Agentic Website Template- 01
Collect the live site and Framer data
List every public URL and locale. Export CMS data, redirects, and available assets, then record important hover, scroll, and page transition effects.
- 02
Clone the homepage into the starter
Ask your coding agent to read README.md and AGENTS.md, then use the site-clone skill with the published Framer URL. Review the page at desktop, tablet, and mobile sizes.
- 03
Move the content and connected services
Build the remaining routes and Collections, reconnect forms and analytics, add local font files, and recreate the interactions that matter to the experience.
- 04
Check the site and move the domain
Test every important URL, localized path, redirect, form, tracking event, animation, and search file in preview. Deploy the approved build and monitor the launch.
What you get after the Framer export becomes a real codebase.
The design stays recognizable
Layouts, responsive behavior, typography, interactions, and important Motion effects follow the Framer site your visitors already know.
The whole website has a new home
Pages, CMS content, forms, scripts, fonts, redirects, localization, and search settings live in an owned Next.js project.
Marketing can keep the site moving
Your team can brief an AI coding agent, review a working change, and launch new pages with the same brand and release rules.
Export Framer site questions.
Straight answers for teams turning a published Framer website into an editable Next.js repository.
Can I export a Framer site and self-host it?
Framer's current HTML export guide says standalone HTML export for self-hosting is unavailable because published sites use managed rendering, image, font, caching, and delivery services. CMS plugins can export content as CSV or JSON. Use the live site and portable data as inputs for the Next.js migration.
Can the exported site keep my Framer animations?
Yes. Record each appear effect, hover or tap state, scroll transform, layout animation, marquee, and page transition. Recreate the important movement with React and Motion, then test reduced motion and mobile behavior.
What happens to Framer CMS, forms, and localization?
Export the Collection fields and items, then rebuild their routes and publishing flow. Reconnect each form destination or webhook. Map every locale, translated path, language setting, and hreflang relationship before launch.
Will exporting my Framer site affect SEO?
Any platform move can change search performance. Keep useful URLs, use direct permanent redirects for changed paths, preserve page meaning and metadata, render important content in HTML, update internal links, and monitor the new site after launch.