How to export Framer CMS content: CSV, JSON or code

You can get content out of the Framer CMS in three ways: export a collection as a spreadsheet from the editor where Framer offers it, copy it with a plugin or by hand, or convert the published site, which writes every collection as typed JSON in src/cms/ with its records, rich text and images. A spreadsheet suits a one-off move into another tool. JSON from a conversion suits a site you'll keep running in code, because the records arrive already wired to the pages that render them.

This post compares the routes, shows what each gives you, and covers the tricky parts: rich text, images, references and locales. Deframer is an independent tool and is not affiliated with, endorsed or sponsored by Framer.

Why export CMS content at all?

People export Framer CMS content for a few reasons:

• A backup they hold themselves, outside Framer's version history. See how to back up a Framer site.
• A move to another platform, a headless CMS or a database.
• Reuse: a newsletter, an app or a report needs the same records.
• Bulk edits that are faster in a spreadsheet or a script than one item at a time.

The right route depends on which of these you're doing.

The three routes compared

Route 1: a spreadsheet export from the editor

Framer's CMS has supported importing collections from CSV for a long time, and its editor has offered ways to get a collection out as a file. Menus and plan features change, so check Framer's own help pages for the current steps on your plan.

What to expect from a spreadsheet:

1. One row per item, one column per field. Good for reading and bulk editing.
2. Rich text flattened into a cell, often as HTML. Fine to re-import into most CMSs; awkward to edit by hand.
3. Images as URLs pointing at Framer's CDN. Download them separately if you're leaving.
4. References as names or ids. You'll need to re-link them in the destination.

Use it when the destination is another CMS with a CSV importer and you don't need the pages.

Route 2: plugins and manual copying

Framer has a plugin ecosystem, and some plugins sync or export CMS collections to tools like Google Sheets, Airtable or Notion. Plugins vary in what they support and how they're maintained, so test one on a copy of a small collection first and check that rich text and images come through the way you need.

Manual copying is realistic only for a handful of items. It's also the only way to bring along drafts that were never published, whichever other route you choose.

Route 3: convert the site to code

A conversion takes a different approach: Deframer reads the CMS data the published site already serves and writes each collection as two files.

• src/cms/<collection>.json: every published record, with readable field names in the same order as in the CMS.
• src/cms/<collection>.ts: a typed schema for those records, and the components rich text can embed.

A record looks like this (shortened):

{
  "id": "cImcpXX5N",
  "title": "How to Create a Lasting Impression",
  "slug": "how-to-create-a-lasting-impression",
  "publishedDate": "2025-02-28T00:00:00.000Z",
  "thumbnail": {
    "src": "https://framerusercontent.com/images/….jpg",
    "pixelWidth": 810,
    "pixelHeight": 790,
    "alt": "Blog Image"
  }
}

The detail pages are wired to these records and prerendered for every item, so the export is also a working site. The files are the same whichever framework you convert to: Next.js, TanStack Start, Astro, React Router or Vite. The full tour is in Framer CMS to JSON in Next.js.

Steps

1. Sign in to Deframer and paste the published site's address.
2. Choose "Assets in the project" if you want images downloaded as files rather than kept on Framer's CDN.
3. Convert (free) and read the result's notices.
4. Verify that the site is yours with the one-line meta tag in Framer's custom code, then download the .zip for 1 credit, or free with the lifetime deal. Downloading is for sites you own or have the owner's permission to download; see pricing.
5. Open src/cms/ in the project.

If you only want the data, you can ignore the rest of the project and keep the JSON. Converting to Vite gives you the smallest project around it.

Handling the tricky parts

Rich text

In a CSV, rich text is usually HTML. In a converted project, it's a JSON tree of elements:

[
  { "type": "h2", "children": ["Why it matters"] },
  { "type": "p", "children": ["Branding is more than ", { "type": "strong", "children": ["a logo"] }, "."] }
]

That shape is easy to walk with a script, which makes it simple to turn into Markdown, HTML or a headless CMS's own rich-text format. Moving a Framer blog to Markdown includes such a script.

Images

Every image field holds src, srcSet, pixelWidth, pixelHeight and alt. If you're leaving Framer, don't rely on CDN URLs indefinitely: convert with "Assets in the project", or download the files with a script and rewrite the src values.

References

A field that references another collection points at the other record. Keep the record ids when you move to another system, so references can be re-linked.

Locales

On a multi-locale site, records that differ by language get their own file per locale, such as src/cms/blog.ja-jp.json, next to the default one. A spreadsheet export usually covers one locale at a time.

Drafts

Only published items are on the published site, so only they appear in a conversion. Publish anything you want to keep first, or copy drafts by hand.

Turning the JSON into CSV

If you converted the site but your destination wants a spreadsheet, a short script does it:

// scripts/to-csv.ts
import { readFileSync, writeFileSync } from "node:fs";

const records = JSON.parse(readFileSync("src/cms/blog.json", "utf8")) as Record<string, unknown>[];
const columns = ["id", "title", "slug", "publishedDate"];
const cell = (value: unknown) => `"${String(value ?? "").replace(/"/g, '""')}"`;
const rows = records.map((record) => columns.map((column) => cell(record[column])).join(","));
writeFileSync("blog.csv", [columns.join(","), ...rows].join("\n"));

Run it with node scripts/to-csv.ts (Node.js 22.18 or later runs TypeScript directly). Add the fields you need, and flatten image objects to their src.

Which route should you choose?

• Moving to another hosted CMS that imports CSV: use Framer's spreadsheet export where available.
• Syncing into a tool you already use: a plugin.
• Keeping the site, in code: convert it; the content arrives with the pages that render it. Later, you can add a headless CMS that writes the same JSON shape.
• A backup you control: convert and commit the project to Git, so content and design are saved together.