Framer Update, CMS

Framer Update: CMS Components

Edo

5:04

11K views

Feb 10, 2026

About this lesson

Introducing Components in the CMS. When writing formatted content, Components let you go beyond plain text, images, and tables. You can drop any Component created on the Canvas directly into your content, unlocking animated galleries, interactive embeds, and newsletter signups right within your text. Whether you are editing in the CMS or directly on the Canvas, inserting Components feels fast and familiar, using the same folder structure you know from the Assets panel. Once added, Components remain fully flexible, with properties, variants, and alignment controls available in context. Components are also automatically responsive when variants matching your breakpoints are present. The result is richer, more dynamic pages where interactive elements live naturally between paragraphs, all managed directly within your content.

https://www.framer.com/updates/cms-components

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

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

0:01Hi everyone, it's Sedo from framer and 0:03this is components in CMS rich text.0:07Formatted content often needs more than 0:09plain copy images and tables. Sometimes 0:13you need more flexibility like animated 0:15galleries, newsletter signups, or even 0:18more interactivity within your text.0:22We believe the best way to unlock this 0:24freedom is to let you and other editors 0:27drop any component that was created in 0:29the canvas.0:31Let me show how simple and flexible this 0:34is in practice. I'm going in the CMS and 0:38opening the first item. You'll notice 0:40that the formatted text toolbar now 0:43includes an insert button.0:46I place my cursor just below the first 0:48paragraph and then click it. You'll see 0:51that the familiar default blocks are 0:53still at the top like image, YouTube,0:56code block, and table. And just below 0:58that, there is a new section with all 1:01the components that were created in my 1:04project. They're displayed using the 1:06same structure as the assets panel. So,1:09it's all familiar and you can browse 1:11your folders and pick the component you 1:13want, like this one. Once added, I can 1:16adjust its properties right from this 1:19popover. The width is set to fill by 1:22default, but I can switch to fit, which 1:24reveals the alignment controls just 1:27below. So, I can center it, align it to 1:30the right, or [music] keep it on the 1:32left. Very flexible. I'll switch back to 1:35fill. And you'll see that there are 1:37extra properties as well. This 1:39component, in fact, includes variants 1:42like an ultra wide one. And I also 1:45expose the radius as an editable 1:47property so I can easily tweak it within 1:50rich text.1:52If I preview the page, you can see the 1:54interactive ticker component is sitting 1:56right inside the text. And this 1:58instantly gives the page a much more 2:01modern and dynamic look.2:03I can also add components while editing 2:05content in line on the canvas. Let me 2:08show you.2:12If I place my cursor here and type 2:15slash, I get a menu that now includes a 2:18component section, I can move through it 2:20with my arrow keys and it shows the same 2:23folder structure as we've seen before. I 2:26pick a small site embed component I 2:29prepared earlier and its properties are 2:32editable right here on the canvas. So,2:34let me update the site URL and adjust 2:37the zoom a little bit.2:40When I preview the page again, I can 2:42fully interact with the embedded site,2:45which makes the content feel much more 2:47engaging.2:50Now, I want to add one last component,2:53something people often drop between 2:55paragraphs, and I want to do it even 2:57faster than before. So, since I know its 3:00name, I can just type slash and then the 3:02letters N and E to filter it out. When I 3:06hit enter, my component is added and 3:09it's my newsletter signup. Now let me 3:12check how this component is behaving in 3:14other breakpoints. And you can see this 3:16one, the mobile one is not responsive 3:19yet. If I click on it, a pop out 3:23explains how responsive components work.3:27And I'm going to show you right away. So 3:29I [music] click edit component. I select 3:32the default variant. and I add a new one 3:35that is very important. I name after the 3:38break point I want to show it in. In 3:40this case, phone.3:43I'm then heading to the stacks property 3:45to make my content mobile ready.3:48Tweaking the alignments and the order of 3:51items and [music] also resizing a bit 3:55the width.3:58Nice. Now, if I head back to the canvas,4:01you'll notice that in the mobile 4:03breakpoint, the correct variant is 4:05picked automatically. And that's because 4:07its name is matching the breakpoint 4:10name. And as long as you observe this 4:13naming in your components, the correct 4:16variant will be automatically picked for 4:19any new component you add. Now, let me 4:23preview my page. And there it is. I now 4:26have a modern and dynamic detail page 4:28where I can interact with a ticker, play 4:31with a site embed, and even subscribe to 4:33a newsletter, all right within my CMS 4:37content. We know this is a feature many 4:40of you have been waiting for, and we are 4:42very excited to see you using it to take 4:45your content to the next level. Thank 4:47you so much for watching, and happy 4:49building.

TeachesCMS Fields Components

Also coversBreakpoints CMS Pages / Dynamic Content Component Variants Custom Cursors Responsive Design Stacks

Watch on YouTube ↗

‹ Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)

Hard work, easy website. Get a Free Domain with Framer. ›