Framer Update, CMS

Framer Update: Empty States in CMS Lists

Edo

3:23

4.4K views

Jan 29, 2026

About this lesson

Starting today, you can add and customize empty states for CMS collection lists directly in the Canvas. When a collection is empty, or when filters return no results, you can now show a dedicated empty state instead of a blank space in the preview and on published sites. To add one, select a collection list, switch the new State property to Empty, and add an empty state layer in one click. Framer automatically manages visibility using a new Visible Items variable, while you stay in full control of layout, styling, and content. So you can add text, icons, buttons, and links to guide visitors and make empty pages feel intentional and useful. This is the first step toward more dynamic CMS collections, with plenty more coming.

https://www.framer.com/updates/empty-states-in-cms-lists

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:01Hi everyone, this is Edo from Framer and 0:04today I want to show you how to set up 0:06an empty state for a CMS collection list 0:08in the canvas. As you know, the number 0:11of items in a collection list can 0:13change. So if I set up a filter here to 0:17display only meetups that are after a 0:19certain date, I won't see any [music]0:22results. And this blue placeholder 0:24explains me what's going on in the 0:26canvas. But when I preview or publish 0:28the site, there is nothing visible and 0:31the page feels really empty. However,0:34starting today, you can fully customize 0:37this state and doing so is extremely 0:41easy. You just select your list and you 0:44notice there is a new property called 0:46state and if you set it to empty, you 0:50temporarily preview the empty state of 0:52the collection. in the blue placeholder.0:55You can read select the layer and click 0:57the plus button to [music] add an empty 1:00state. So I'm going to do just that. And 1:03my empty state layer is added. Now 1:07before having fun in completely 1:08customizing this empty state, I just 1:11want to show you how it's set up. There 1:14is a visibility condition already set 1:16for you which reads like this. When the 1:19number of visible items within the 1:22collection list equals zero, the empty 1:26state is visible and when it doesn't is 1:29not. So if you want to control the 1:31visibility or any other styling based on 1:33this variable, this is how to do it. Now 1:36back to customizing our empty state. I'm 1:39going to [music] increase the height to 1:41400 and then change the tint to be white 1:44and 4% opacity.1:47typing in uh no meetups planned quick 1:52style update and adding a sub line that 1:55reads want to host one in your city.1:59Apply to become a host. And there it is.2:03Let me add a quick icon to make it 2:06[music] more visually appealing. I'm 2:09going to make it a bit bigger and search 2:13for 2:15uh something like users. I'm going to 2:18pick this one.2:20And lastly, I want to add a button to 2:22make this also useful. So, I'm going to 2:26type in become a host and add a link to 2:30the related page. Now, when I hit done,2:33I'm going to exit this empty state 2:36editing mode. So I see my collection 2:39items again with a big difference from 2:42the beginning that if I select my 2:45collection list and I add a filter that 2:47doesn't produce any results, my empty 2:50state is now visible not only in the 2:53canvas but [music] also in the preview 2:55and in the published site with all my 2:57customization and links working. This 3:01addition is just the beginning in making 3:03your collection lists feel more dynamic.3:06So stay tuned for more updates and happy 3:08building.

TeachesCollection Lists

Also coversCollections Links Variables

Watch on YouTube ↗

‹ Building an Expanding Article Stack in Framer

Getting Started with Vectors in Framer (Vectors Lesson 1) ›