# Framer Update: CMS Components Source: https://www.youtube.com/watch?v=y3L90tBlnxE Recap page: https://rapidrecap.app/video/y3L90tBlnxE Generated: 2026-02-10T16:07:56.784+00:00 --- ## Quick Overview Framer introduced Components in CMS Rich Text, allowing users to embed, configure, and interact with custom components like animated elements, site embeds, and newsletters directly within CMS content blocks, providing a much more modern and dynamic editing experience than static content alone. **Key Points:** - Framer launched Components in CMS Rich Text, enabling users to insert any component directly into text content. - Users can insert standard blocks like Image, YouTube, Code Block, and Table, alongside custom components like Blog posts, Buttons, Forms, and Newsletters. - Components maintain their structure, allowing users to edit properties like Width (Fill/Fit), Variant (e.g., Auto, Default, Ultra Wide), and Radius via a pop-up editor. - The video demonstrates embedding a 'Site Embed' component by typing a slash, selecting 'Component', then 'Site Embed', and adjusting its URL and Zoom properties (e.g., Zoom to 0.3). - A 'Newsletter' component with responsive variants is shown, demonstrating that components automatically adapt their variant based on the current breakpoint (e.g., switching from the desktop 'Default' to the mobile 'Phone' variant). - Inline editing allows users to filter the component list by typing the component name (e.g., typing 'N' filters to Newsletter), speeding up the workflow. - Components remain interactive in preview mode, allowing testing of elements like the embedded site or newsletter sign-up form. ![Screenshot at 00:05: The main screen displays the Framer editor interface highlighting the title 'Components in CMS Rich Text' and introducing the concept of dynamic content integration within rich text fields.](https://ss.rapidrecap.app/screens/y3L90tBlnxE/00-00-05.jpg) **Context:** This video, presented by Edo from Framer, details a significant update to Framer's Content Management System (CMS) capabilities: the integration of reusable Components directly within Rich Text fields. Historically, rich text editing was limited to static elements like plain text, images, and basic formatting, forcing users to break content flow for dynamic elements. This update allows editors to embed functional, customizable components, ensuring dynamic content is naturally integrated into the narrative. ## Detailed Analysis Framer's update introduces Components into the CMS Rich Text editor, moving beyond static paragraphs to allow users to embed any custom component directly into their content flow. This is achieved by typing a forward slash (/) in the rich text editor, which opens an 'Insert' menu. This menu lists standard formatting options (Heading, Blockquote, Lists) and a dedicated 'Blocks' section where users can select 'Component'. Once 'Component' is selected, a submenu reveals all available components, including standard ones (Image, YouTube, Code Block, Table) and custom project components (Blog, Buttons, Forms, Headers, Pivots, Newsletter, Site Embed). The video demonstrates embedding a 'Site Embed' component, showing that its properties (like URL and Zoom) can be edited directly in a pop-up, maintaining dynamic interactivity even in preview mode. Furthermore, components can have variants for different breakpoints; for example, the 'Newsletter' component automatically selects the 'Phone' variant when the view switches to a mobile breakpoint. Users can also filter the component list instantly by typing part of the component name (e.g., typing 'N' filters to Newsletter). The update aims to provide a more expressive and modern way to create content that is fully dynamic and interactive, right inside the text editor, without needing workarounds. ### Dynamic Content Introduction - Formatted content often needs more than static paragraphs - Framer introduces Components in Rich Text for dynamic content integration - Components are inserted via the slash command. ### Inserting Components - Users access components via the slash menu under the 'Blocks' section - Options include standard blocks (Image, YouTube) and custom components (Blog, Buttons, Forms, Newsletter, Site Embed). ### Component Configuration - Components retain their properties panel access within the text editor - Users can adjust Width (Fill/Fit), Variant (e.g., Auto, Ultra Wide), and Radius in a pop-up editor. ### Component Variants & Responsiveness - Components support variants defined for different breakpoints (e.g., Desktop vs. Phone) - When switching breakpoints, the component automatically picks the correct variant. ### Inline Editing Workflow - Typing a slash followed by a component name (e.g., /Newsletter) instantly filters and inserts the component - This speeds up the editing process significantly. ### Component Interactivity - Embedded components, like the Site Embed or Newsletter form, function interactively in preview mode, ensuring dynamic content works as intended. ![Screenshot at 00:04: The initial view of the Framer editor, focusing on the title screen announcing "Components in CMS Rich Text" with the purple diamond logo.](https://ss.rapidrecap.app/screens/y3L90tBlnxE/00-00-04.jpg) ![Screenshot at 00:38: The screen transitions to the CMS view where the user opens the list of available content entries and selects one to edit.](https://ss.rapidrecap.app/screens/y3L90tBlnxE/00-00-38.jpg) ![Screenshot at 00:50: The user opens the 'Insert' menu within the rich text editor by typing a forward slash, revealing the categorized list of available blocks and components.](https://ss.rapidrecap.app/screens/y3L90tBlnxE/00-00-50.jpg) ![Screenshot at 01:16: The user selects a component from the library and opens its property editor pop-up to adjust settings like Width, Variant, and Radius.](https://ss.rapidrecap.app/screens/y3L90tBlnxE/00-01-16.jpg) ![Screenshot at 03:22: The user selects the 'Newsletter' component variant pop-up and changes its variant setting, demonstrating responsive control.](https://ss.rapidrecap.app/screens/y3L90tBlnxE/00-03-22.jpg)