How to Export Your Content from Framer Without Losing Formatting

Why Framer Export Is Harder Than You'd Think

Most website platforms give you an export button. Webflow exports HTML and CSS. WordPress exports XML. Squarespace gives you a zip file. Framer gives you... nothing.

There is no built-in export feature in Framer. No CSV download, no content backup, no "download my site" button. Your content — every page, every blog post, every CMS item, every image — lives in Framer's proprietary format, accessible only through their editor.

This isn't a bug. It's a business decision. Framer benefits from lock-in. The harder it is to leave, the longer you stay. But if you've decided to migrate, you need a strategy for getting your content out intact.

Here's the good news: it's entirely possible. It just requires the right approach for each type of content.

Understanding What You Need to Extract

Before diving into methods, inventory what you actually have in Framer:

• Static pages — homepage, about, services, contact, etc. These contain structured content with text, images, and layout.
• CMS collections — blog posts, team members, portfolio items, testimonials. Structured data with defined fields.
• Media assets — images, videos, icons, and other files uploaded to Framer.
• Design assets — your color palette, fonts, component library. These define your visual identity.
• SEO metadata — page titles, descriptions, OG images, and URL structures that you need to preserve for search rankings.

Each category requires a different extraction approach. Let's go through them one by one.

Method 1: Structured Scraping for CMS Content

For CMS collections (blogs, portfolios, etc.), web scraping is the most reliable extraction method. Your Framer site serves real HTML, and that HTML contains your content.

The basic process

Write a script (or use a tool) that visits each CMS page on your published Framer site and extracts the structured content. Python with BeautifulSoup, Node.js with Cheerio, or even a browser automation tool like Puppeteer all work.

For a blog with 50 posts, the script would:

1. Visit your blog index page and collect all post URLs
1. Visit each post URL
1. Extract the title, date, body content, featured image, categories, and any custom fields
1. Save each post as a structured JSON or Markdown file

The tricky part: Framer renders content using React, which means some content is loaded dynamically via JavaScript. A simple HTTP request won't see it. You need a tool that renders JavaScript — Puppeteer (headless Chrome) or Playwright are the standard choices. They load the page like a real browser, wait for all content to render, then extract the HTML.

Preserving rich text formatting

Framer's rich text output is clean HTML — headings, paragraphs, bold, italic, lists, and links all use standard tags. The key is to capture the HTML structure, not just the text. If you strip HTML and save plain text, you lose all formatting. Instead, save the inner HTML of the content container and convert it to your target format (Markdown, Lexical, or your CMS's rich text format) in a separate step.

Common formatting elements to preserve:

• Headings (h1-h6) — critical for SEO and content structure
• Bold and italic text — emphasis markers
• Ordered and unordered lists
• Links with href attributes — check for relative vs. absolute URLs
• Inline images with alt text
• Blockquotes and code blocks

Method 2: Copy-Paste With Structure (For Small Sites)

If you have fewer than 20 CMS items, the honest answer is that manual copy-paste is faster than writing a scraping script. But there's a right way and a wrong way to do it.

The wrong way

Copy text from the Framer editor, paste into Google Docs, copy from Docs, paste into your new CMS. This strips formatting, adds unwanted styling, and loses links and images.

The right way

Open each published page in your browser. Use the browser's Developer Tools to inspect the content container. Copy the inner HTML. This preserves the complete content structure. Then paste it into a Markdown converter (html-to-md, Turndown, or your CMS's HTML import) to get clean, portable content.

For each CMS item, also note:

• The page URL (for redirect mapping)
• The page title and meta description
• The featured image URL
• Any category or tag values
• The published date

Extracting and Preserving Images

Images are the most commonly botched part of a Framer export. Here's why:

Framer hosts your images on their CDN (typically served from framerusercontent.com). When you leave Framer, those image URLs may continue to work for a while, but you have no guarantee. Framer can change their CDN policies, and you'd have no recourse. You must download every image and re-host it yourself.

How to extract images systematically

1. Compile a list of all image URLs. Scrape your site and collect every img src and background-image URL. Don't forget OG images and favicon.
1. Download each image at full resolution. Framer's CDN adds size parameters to URLs. Remove them to get the original, uncompressed image.
1. Organize by page or collection. Name files descriptively. "hero-homepage.jpg" is better than "image-47.jpg" for long-term maintainability.
1. Re-optimize for your new platform. Use tools like Sharp or Squoosh to convert images to WebP, generate responsive sizes, and compress. Your Next.js site's Image component will handle this automatically if you provide the source files.

Don't forget these commonly missed assets

• Favicon and app icons
• OG/social media preview images
• Background images set via CSS or component properties
• Icons (if using uploaded SVGs rather than a font)
• Videos hosted in Framer
• Downloadable files (PDFs, documents) linked from your pages

Maintaining URL Structure for SEO

If your Framer site has any organic search traffic, preserving your URL structure is critical. Every URL change without a proper redirect is a lost search ranking.

Document every URL

Create a complete spreadsheet of every URL on your Framer site. Include:

• The current URL path
• The page title
• Monthly organic traffic (from Google Search Console)
• The new URL on your migrated site
• Whether it needs a 301 redirect (yes, if the URL changes)

Priority: high-traffic pages first

Not all URLs are equal. A page that gets 500 visits/month from Google needs a perfect redirect. A page that gets 0 visits can be safely deleted or restructured. Focus your redirect effort on the URLs that matter.

Implementation

In Next.js, you define redirects in next.config.js. Set up 301 (permanent) redirects from every old URL to its new equivalent. Test them with curl or a redirect checker tool before going live. After launch, monitor Google Search Console for 404 errors and fix any missed redirects immediately.

Tools and Approaches That Work

Here's our recommended toolkit for Framer content extraction:

• Puppeteer or Playwright — for scraping JavaScript-rendered content from your published Framer site
• Cheerio (Node.js) — for parsing the extracted HTML and extracting structured data
• Turndown — for converting HTML to Markdown while preserving formatting
• wget or curl — for batch-downloading images from Framer's CDN
• Screaming Frog SEO Spider — for crawling your site and generating a complete URL map (free for up to 500 URLs)
• Google Search Console — for identifying your highest-value URLs and monitoring post-migration SEO health

The extraction process typically takes 1-3 days for a site with 50-200 CMS items. For larger sites, the scraping approach scales linearly — 500 items might take an extra day of script refinement and verification.

What About Framer's Design Data?

Your color palette, font choices, spacing system, and component variants are part of your brand identity. Framer doesn't export these as design tokens, but you can extract them:

• Colors: Inspect your site with DevTools and note every hex/RGB value used. Convert to CSS custom properties or Tailwind config values.
• Fonts: Note the font families, weights, and sizes used across your site. Load them from Google Fonts or purchase the appropriate web licenses.
• Spacing: Document the padding, margin, and gap values used. Framer often uses a consistent spacing scale (8px, 16px, 24px, 32px, etc.) that maps directly to Tailwind's default spacing.
• Breakpoints: Framer uses specific responsive breakpoints. Note these and match them in your Tailwind config.

This design extraction ensures your new site maintains visual consistency with your brand, even if the underlying technology is completely different.