← Sourceferry
DocumentationSupport

How Sourceferry works

1. Pick pages and a format

Open Sourceferry from Framer's Plugins menu. The Export tab lists your web pages, home first, with CMS detail pages marked. Check the ones you want and pick a format:

  • Static HTML and CSS: a folder per page with an index.html, css/site.css (shared rules, color and text styles, components) and css/<page>.css. Paths are relative, so it works from any folder on any static host. Serve it with any static server, for example bunx serve .
  • Next.js (React, TypeScript): an App Router project with app/<route>/page.tsx and page.css per page, components/, images in public/images/ and a package.json. Run bun install then bun run dev. It has no dependency on Framer.

Images are saved into the ZIP by default; choose Keep Framer's image links to leave them on Framer's servers. CMS collections as JSON adds a file per collection in content/.

Preview first page shows the first checked page as the static site renders it, at each of the page's breakpoints, in a frame with scripts turned off. The preview is free and doesn't count as an export.

2. Breakpoints

Framer keeps a copy of each page's layers per breakpoint. Sourceferry matches those copies to the primary breakpoint's layers and writes one page: the primary breakpoint is the base CSS, and each other breakpoint gets a media query with only what changed there (a stack that turns vertical, a smaller gap, a layer that's hidden). Layers that exist only on one breakpoint are added and shown only there. Breakpoint ranges follow Framer's: Tablet from 810 px up to 1199 px, Phone below 810 px, and so on for your own widths.

3. Layout and look

  • Stacks become flexbox (direction, distribution, alignment, wrap, gap, padding); grids become CSS grid (columns, minimum widths, row heights, spans, alignment).
  • Fixed, relative (%), fill (1fr) and fit sizes, min and max sizes, aspect ratio, absolute and fixed positions with their pins and centering, sticky layers, z-index, overflow, rotation and opacity.
  • Fill colors (or color styles), gradients, background images with their alt text, borders and corner radius.
  • Text: tags from text styles (h1 to h6, p), bold, italic, links and line breaks, and the line limit.
  • SVG layers are inlined with scripts and event handlers removed.
  • Class names come from layer names, page by page (home__hero, about__team); default names fall back to the layer kind.

4. Styles, fonts and components

Color styles become CSS variables in :root, with dark values in a prefers-color-scheme: dark block. Text styles become classes (ts-heading-h1) with font, size, line height, letter spacing, color, alignment, transform, decoration and their breakpoint sizes. Fonts from Google Fonts and Fontshare are linked in each page's head; fonts uploaded to Framer are listed in the report.

Design components from your project are exported with their primary variant: inlined where they're used in the static site, one file each in components/ in Next.js. Code components and components from other projects get a placeholder element with the component's name and its Framer URL, so you can rebuild them in code.

5. Links and CMS

Links to your pages are rewritten to the export's paths (./about/ in the static site, /about in Next.js). Email, phone, in-page and outside links stay as they are. Anything else is listed in the report.

CMS collections become JSON with each field's name as the key, enum options as their names, images as saved files with alt text, and drafts flagged. A CMS detail page is exported once as its layout; in Next.js it becomes a dynamic route with generateStaticParams reading the JSON, ready for you to bind fields.

6. One layer

The Selection tab follows what you select on the canvas. Copy code puts the layer's HTML and CSS, or its React component, on your clipboard; Download ZIP adds its images and any design components it uses.

7. The report

Every export includes sourceferry-report.csv and a README. The report lists, layer by layer, what didn't carry over: code components, other component variants, instance property values, images that couldn't be downloaded, links that don't point at an exported page, fonts uploaded to Framer.

Limits

  • Effects (shadows, blurs), interactions, animations, scroll effects and hover states aren't readable through Framer's plugin API, so they aren't in the export.
  • Text without a text style keeps the inherited color, since Framer's API doesn't expose color on plain text.
  • A layer moved into a different parent on one breakpoint stays where it is on the primary breakpoint.
  • Forms, search, SEO settings, redirects and hosting features stay in Framer.

License

The trial gives 5 exports of up to 3 pages over 7 days; a selected layer counts as one export. Paste the license key from your email in the Plan tab. One seat works on two Framer accounts and every project and page. Support: hello@greatwork.company.