Importing content

Prepare your CSV file

Make sure your file is exported as a "CSV" file, also known as a "Comma-Separated Values" file. If you encounter any issues, check if the file is encoded in UTF-8 and is less than 5 MB. If the file is larger than this, try removing the columns you do not need. See below for additional information on specific fields.

Tip: You do not need to import all the columns from your CSV. Only the fields configured in your CMS collection in the next step will be imported.

Rich Text Fields

Formatted text content must be formatted as HTML. Many tags are supported, such as paragraphs and headers <p>, <h1>, <h2>), formatting (<em>, <i>, <strong>), links (<a>), lists (<ol>, <ul>, <li>) and images (<img>). Images from URLs will be automatically downloaded from their original source and imported into Framer.

Image Fields

The images in your CSV file must be URLs. They will be downloaded and imported into Framer. Relative paths are not supported.

Date Fields

The recommended format is compatible with ISO8601, for example: 2023-12-17T14:42:00. The abbreviated year-month-day format is also supported, for example: 1982-12-01. Long format strings may work, but will depend on your browser, for example: Tue 12 May 2020 18:50:21 GMT-0500 (Central Daylight Time). All time data, including timezone information, will be removed from the date.

Color Fields

A color formatted as an RGB hexadecimal code in CSS, an rgb expression, hls or hlv, or a named color. All variants with an alpha value are also supported. 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 be interpreted as "Yes", all other values will be "No".

Prepare your CMS Collection

Here is a checklist to prepare your CMS collection for import.

1. Ensure each field/column in your CSV has a corresponding field in your CMS collection with the same name.

2. Include a unique field for each item, usually called "Slug".

3. Make sure your data types match (for example, a Date CMS field for a date field in your data).

Tip: Framer uses your Slug field to identify each item and will use it to update that item in repeated imports.

Import your CSV file

You can find the Import option by accessing your project's CMS and clicking "Import" in the toolbar. There, you can select the CSV file you want to import. You can also drag and drop the CSV file directly into the CMS collection interface.

Tip: The import allows you to undo and redo actions. If you are not satisfied with the import, simply undo the change with CMD+Z on macOS or CTRL+Z on Windows. Redo will not execute the import again, but will apply the changes to the collection instantly.

Updating or re-importing

To update your content, you can import it again to the same collection. If any item in the new import has a "slug" field that matches one of the items in your collection, you can update it or choose not to import it again.