Framer Update: On-Page Editing 2.0

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).

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).