Importing Content
Mar 5, 2025
Prepare Your CSV File
Make sure your file is exported as a "CSV" file, also known as "Comma Separated Values". If you encounter any hiccups, check if your file is UTF-8 encoded and less than 5mb. If it's bigger, consider removing some columns you won't need. See below for more insights on specific fields.
Tip: You don't have to import every column from your CSV. Only fields set up in your CMS collection in the next step will be imported.
Rich Text Fields
If you've got formatted text, it should be in HTML format. Many tags are welcome, including paragraphs and headers (<p>, <h1>, <h2>), formatting (<em>, <i>, <strong>), links (<a>), lists (<ol>, <ul>, <li>) and images (<img>). Images sourced from URLs will be automatically fetched and imported into Framer.
Image Fields
Images in your CSV need to be URL links to the image. They'll be downloaded and brought into Framer. Remember, relative paths won't work here.
Date Fields
The recommended format follows ISO8601, like this: 2023-12-17T14:42:00. The simpler year-month-day format is also doable, for example: 1982-12-01. Longer format strings might work if your browser is on board, like: Tue May 12 2020 18:50:21 GMT-0500 (Central Daylight Time). All time elements, including time zones, will be stripped from the date.
Color Fields
Colors can be in CSS hexadecimal RGB style, rgb, hls or hlv expressions, or a named color. Variants with an alpha value are fine too. Examples: #00ffee, rgb(0, 153, 255), hsla(204, 100%, 50%, 0.5), blue, darkgreen, rebeccapurple.
Toggle Fields
A boolean value. Y, yes, TRUE, 1 will mean "Yes" for the toggle, anything else will mean "No".
Get Your CMS Collection Ready
Here's a handy checklist to gear up your CMS collection for importing.
Ensure each field/column in your CSV corresponds to a matching field in your CMS collection, with the same name.
Add a unique field for each item, commonly called "Slug"
Make sure your data types align (e.g., a CMS Date field for a date field in your data)
Tip: Framer uses your Slug field to pinpoint each item and will utilize it for updates with repeat imports.
Import Your CSV File
To import, head over to your project's CMS and click "Import" in the toolkit. From there, choose your CSV file for import. You can also drag & drop your CSV file right into the CMS collection interface.
Tip: Importing supports Undo/Redo. If the import isn't quite right, simply undo with CMD+Z on MacOS or CTRL + Z on Windows. Redo won't repeat the import but will instantly apply changes to the collection.
Updating or Re-Importing
To refresh your content, re-import it into the same collection. If any item in the new import has a slug field matching one from your collection, you'll have the option to update it or skip the repeat import.