What’s New

To add Pagination, select your Collection List, click on Pagination, select one of the two options, then pick how many items to load. Pagination also works with existing Limits and Start Offsets. Both the Spinner and Button are completely customizable, and you can pick any Variant for their Loading states. The Spinner itself is just a layer with a conic gradient and a Loop Effect, so you get full control. Adding Pagination helps make your blogs and changelogs much faster to load, especially when they contain dozens of items.

• Infinite Scrolling with custom Spinner component

• Load More Button with custom Button component

• Enjoy freeform positioning of both components

• Design your own Loading and Hidden states

• Make your CMS Pages much faster to load

Filtering

We've added the ability to filter your collection lists in the CMS. This allows you to keep your content in a single collection, yet customize how that collection is presented on each of your web pages. For example, if you're creating docs for your app, you might want to filter articles per topic on your homepage. Or when creating a blog, you might want to filter your blog posts per category.

This quality update brings canvas and layer panel improvements. We've updated the Component symbol throughout the app to differentiate it from Grids. Plus, we've made Primary Breakpoints and Variants more distinct in the left panel, making it easier to see if you're editing the primary or an instance. Breakpoints will now also show the ranges in the layer panel. See more updates below.

From January

Last month, we added support for automatic tinting and new layout options for components, plus a whole lot of fixes and improvements. If you give your Page a Fill color, this will now also tint browsers like Safari and will ensure you don't get plain white backgrounds when overscrolling on any mobile device. Plus, we've added support for Min Max sizing to all Smart and Code components, greatly simplifying many common layouts and patterns. See the full changelog below.

• We automatically set the body background, based on your Page's fill color

• You can now override the body background and customize per breakpoint

• We now support Min Max sizing for all Smart and Code Component

• We now consistently show the Min Max hint within the property panel

• You can now use all alignment options for layers with Position set to Fixed

• We now inform you if a parent layer height changes due to layout edits

• We improved the Radius and Padding controls, no longer resetting values

• Number inputs split in four no longer show steppers, so longer values fit

• We improved Appear Effects using Scale with Spring transitions

Make sure your file is exported as a "CSV" file, also known as a "Comma Separated Values" file. If you encounter any issues you'll want to verify your file is UTF-8 encoded and less than 5mb. If your file is larger than that, try removing columns you may not need. See below for additional information on specific fields.

Tip: You do not 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

Formatted text content needs to 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

Images in your CSV content must be URLs to an image. They will be downloaded and imported into Framer. Relative paths are not supported.

Date Fields

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

Color Fields

A color formatted as CSS hexadecimal RGB code, rgb, hls or hlv expression, 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 the toggle being "Yes", all other values will be "No".

Prepare your CMS Collection

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

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

2. Include a unique field for each item, often named "Slug"

3. Verify that your data types match (eg. a CMS Date 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 with repeat imports.

Import your CSV file

You can find the Import feature by going to the CMS in your project, and clicking "Import" in the toolbar. From there, you can select your CSV file for importing. You may also drag & drop your CSV file directly into the CMS collection interface.

Tip: Importing supports Undo / Redo actions. If you're not happy with the import, you can simply undo the change with CMD+Z on MacOS or CTRL + Z on Windows. Redo will not re-run the import, but instantly apply the changes to the collection.

Updating or Re-Importing

To update your content, you can import into the same collection again. If any item in the new import has a slug field that matches one of the items in your collection, you will be able to update it or skip importing it again.