# Framer Update: On-Page Editing 2.0 Source: https://www.youtube.com/watch?v=OnEzp8K7fjU Recap page: https://rapidrecap.app/video/OnEzp8K7fjU Generated: 2026-01-08T14:34:35.949+00:00 --- ## Quick Overview Framer's On-Page Editing 2.0 introduces the ability for editors to directly drag, drop, and rearrange content blocks on the live site, while maintaining editor control over which elements are editable and which are locked, significantly enhancing the workflow for non-developers. **Key Points:** - Framer launched On-Page Editing 2.0, allowing users to edit and re-arrange content directly on the live website preview (0:15, 0:25). - Editors can now drag and drop content blocks anywhere on the page and move them between different areas like the left or right side (0:27, 0:33). - Specific elements, like the main headline "Startups move faster with Framer," can be selected, moved, and re-arranged (1:28, 1:45). - The system intelligently locks elements that editors should not touch, such as the main headline when editing sub-components, preventing accidental changes (1:51, 2:27). - Users can change the variant of a component (e.g., switching from 'General' to 'Analytics' or 'CMS') while in edit mode (3:04, 3:08). - The update supports localization, allowing editors to instantly translate content (e.g., English to Italian) while staying in the editing interface (3:22, 3:31). - The video concludes by showing a notification that Eduardo Mercati made edits using on-page editing, requiring a review and publish action (3:58). ![Screenshot at 0:25: The initial landing page highlights the core value proposition that "Startups move fast with Framer," displaying four key feature icons \(rocket, graph, play button, star\) before demonstrating the new on-page editing features.](https://ss.rapidrecap.app/screens/OnEzp8K7fjU/00-00-25.jpg) **Context:** The video demonstrates the major update to Framer's on-page editing capabilities, referred to as On-Page Editing 2.0. This feature aims to bridge the gap between design control and content management by allowing non-developers (like marketers or founders) to make structural and content changes directly on the live preview, offering more flexibility than previous versions where only text content was easily editable. ## Detailed Analysis Framer's On-Page Editing 2.0 enables editors to directly manipulate the layout and structure of a live website preview. The presenter demonstrates dragging a content block from the left side of the screen to the right side (0:27, 0:33). Furthermore, editors gain the ability to reorder structural elements, such as moving a series of cards (0:56). When an element like the main headline is selected, it becomes editable, but the system enforces locks on derivative elements or elements deemed critical by the designer, ensuring editors cannot make accidental structural changes (1:48, 2:27). The update also supports advanced customization, like swapping out component variants (e.g., changing from a 'General' view to a 'CMS' view in the settings panel) (3:04, 3:08). Localization is also supported, as shown when the site text instantly switches from English to Italian (3:22). The key benefit is that these structural changes are made in real-time within the editing mode, unlike previous versions where rearrangement was not supported (3:38). Finally, the video shows a notification pop-up indicating that changes have been made by a user named Eduardo Mercati, requiring a final review and publish action for the updates to go live (3:58). ### On-Page Editing Capabilities - Drag and drop content blocks anywhere on the page - Re-arrange structural elements like card series - Select and edit text content in real-time ### Editor Controls and Safety - Elements designated by designers are locked and cannot be moved or edited by content editors - Editors can still change component variants (e.g., General, CMS, Analytics) - Localization support allows instant language switching on the live preview ### Workflow Demonstration - The presenter swaps out an icon from the Framer Icon Set by searching for 'gift' (2:40) - The presenter demonstrates moving the main headline block to the right side of the screen (1:28) ### Post-Edit Process - The system notifies users of changes made by other editors (e.g., Eduardo Mercati edited the 'Startups' page) (3:58) - Edits require final review and publishing to go live (4:01) ![Screenshot at 0:02: Initial screen showing the four core feature icons \(rocket, graph, play, star\) against a black background, advertising that "Startups move fast with Framer."](https://ss.rapidrecap.app/screens/OnEzp8K7fjU/00-00-02.jpg) ![Screenshot at 0:04: Demonstration of the icon selection modal within the editing interface, showing a search for an icon.](https://ss.rapidrecap.app/screens/OnEzp8K7fjU/00-00-04.jpg) ![Screenshot at 0:07: The Framer editor interface displaying the Layers panel on the left, the canvas in the center, and the Properties panel on the right, with a context menu open.](https://ss.rapidrecap.app/screens/OnEzp8K7fjU/00-00-07.jpg) ![Screenshot at 0:56: A section highlighting three key benefits in card format: Free year of Framer Pro, Update with one-click publish, and Go live fast with no setup needed.](https://ss.rapidrecap.app/screens/OnEzp8K7fjU/00-00-56.jpg) ![Screenshot at 3:07: Switching the component variant from 'General' to 'Analytics' within the App UI settings panel on the right side of the editor.](https://ss.rapidrecap.app/screens/OnEzp8K7fjU/00-03-07.jpg)