Framer Update: CMS Components

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.

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.