Framer CMS List: make each item a whole you can add, remove and reorder

Keep a website current without repeatedly rebuilding its design

Framer is a visual website design and publishing tool. Designers arrange pages on a canvas, while content editors manage articles, product information and other material through its CMS (content management area). The output is a website that will keep changing, rather than a single screenshot.

This analysis focuses on the List field, added to the CMS on September 8. Consider a teaching scenario: a training website lists the outcomes of each course. Some courses have two; others need seven. Fixed fields named “Outcome 1,” “Outcome 2” and “Outcome 3” can make a change in quantity affect both the content structure and the page design. List groups this content into rows that editors can add and reorder.

Identify the content unit before creating a list

A course page may have two learning outcomes or seven. Editors want to manage one outcome, not a fixed series of slots named Outcome 1, Outcome 2 and Outcome 3. The CMS List update places this content in rows that can be added, edited and reordered.

First ask whether the items belong to the current course. Course-specific outcomes fit a local list. An instructor shared by several courses is better represented through a collection reference: several places use the same record rather than copying a biography and updating it everywhere. Similar-looking cards can have different maintenance relationships.

Connect one data item to one card on the canvas

1. Organize the rows. Let each row represent a complete item and choose its order. Editors can add or remove meaningful content without expanding a fixed set of fields.
2. Design one item. Arrange how a card presents its content and connect the design to the data.
3. Repeat it for each item. Use Repeat to display each list entry. A list that is not yet on the canvas can also be added through Insert.
4. Check the page. When the number of outcomes changes, confirm the displayed cards still correspond to the items. Saving in the CMS is only part of completion.

The data describes what exists and in what order; the card describes how each item appears. Connecting them gives content editors and designers the same unit to work with.

Check dependent pages when migrating old fields

Framer Agent can turn existing repeated fields into a List and reconnect canvas data bindings—the links that determine which field each card reads. Migration is complete when both the content and the page still express the intended meaning, not simply when a new field appears.

Check courses with short lists, long lists and missing values. Do headings still belong with the right descriptions? Is the order correct? Does a page still use an old field? These are migration acceptance checks, not guarantees supplied by automatic reconnection. Once verified, ongoing editing can become adding, deleting and moving complete items instead of shuffling several slots.

Change the editing unit from a numbered slot to a complete item

With fixed fields, moving the second item to the front can mean shuffling text among several title and description fields. Move a title without its description and the cards may still look tidy while their meaning is wrong. Row-based management makes “one outcome” the object being moved. The data structure is closer to what the editor intends to change.

This is more than saving a few field names. It changes what adding content means: expanding a form template becomes adding an item to a list. A useful design lesson is to identify what users consider inseparable before deciding the scope of editing, moving and deleting. Whether a tutorial step’s title, explanation and image should move together matters before the appearance of its buttons.

Migration reconnects the places that use the content

Even when old fields successfully become a list, a page might still point at the old fields. Framer’s migration path handles both the CMS and its canvas connections. It addresses an easily missed part of structural change: the places consuming the content must change with it.

In the course-page scenario, completion means the existing outcomes still appear on the correct page and cards, not merely that a List column exists. Connecting conversion with the places that display the result lets users judge whether the page still conveys its original meaning. They need not assemble that judgment from disconnected technical steps. Automatic reconnection provides a starting point; empty items and pages that mix old fields still need checking.

Both decisions suggest a reusable principle: let people work with meaningful units of content, and account for the places that depend on those units when their structure changes.