CMS, Layout & Design, Publishing & Settings

On-Page Editing in Framer: A powerful new way to update Framer sites, right in the browser.

Joseph

5:12

9.5K views

Aug 6, 2025

About this lesson

Introducing On-Page Editing. A powerful new way to update Framer sites, right in the browser. This major release makes it possible for anyone on your team, whether designer, developer, marketer, or editor, to make content updates directly from the live site. From static pages to CMS content, every editable element is just a click away. Simply enter edit mode, and you’ll see blue outlines around all editable text, images, and components. Then click to type, swap assets, and adjust variables inside components. Rich text fields unlock advanced formatting and embeds. You can also create entire new CMS pages in a few clicks, and all changes sync instantly to the Framer project, keeping everyone aligned. Once done, site collaborators get notified to review the changes, maintaining full control over what gets published. With On-Page Editing, the entire team can contribute to the site, no design experience needed. Just open the site and click Edit.

https://framer.com/updates/on-page-editing

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

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

0:00With Framer's onpage editing, absolutely 0:02anyone on your team can confidently make 0:04content updates, collaborate in real 0:06time, and even bring entire new pages to 0:09life directly from your live website in 0:12the browser. Let's imagine I'm on the 0:15marketing team at Perplexity, but I'm 0:17not a designer or a developer. So, the 0:19design team has kindly invited me to the 0:21framer project for our marketing site 0:23with permission to edit the content of 0:25the site. As a content editor, I can 0:28open our live site in the browser and 0:30find the new edit button on the right 0:32side of the page. When I click to edit,0:34blue outlines draw around each and every 0:36piece of content that's editable. And 0:39this works on both static pages and CMS 0:42content. But let's start with this 0:43static landing page. I can just click 0:45and type to edit anything directly on 0:48the site itself. The inline editing 0:50experience feels fluid and lightweight,0:53like that of a modern writing tool.0:55natural yet somehow magical at the same 0:58time. And clicking to change an image 1:00brings up the familiar image popover 1:02where I can swap the image, set the 1:04size, fit, and position, add alt text,1:08and even crop the image with a built-in 1:10modal. If you're wondering, what about 1:12components? Yes, you can edit those,1:15too. You'll get a popover that reveals 1:17any text or image variables, which also 1:19gives designers more control over what 1:22can and can't be edited. By the way, as 1:24I'm making edits here, things are 1:26updating on the design canvas in the 1:27framer project in real time and vice 1:30versa. In fact, Justin is making some 1:33edits in the frame project as we speak.1:35And as long as I'm in edit mode, I see a 1:37live onetoone reflection of his changes.1:40But when I'm all done editing here, I 1:42can head down to the editor bar and 1:44click finish editing, which sends a 1:46notification to my collaborators and 1:48reminds me that changes will go live 1:50when the project is published. At this 1:52point, I'm still looking at a preview of 1:54all the unpublished edits on the page,1:56but I can click go back to site to 1:58return to seeing only what's live and 2:00public. If I had permission to deploy, I 2:02could click here to hop over to Framer 2:04and publish myself. But for this 2:06project, I'll have to rely on a 2:07collaborator like Justin. From my side,2:10I can already see the edits Joseph made 2:12here on the canvas. And what I'm seeing 2:14here looks good to me. So, I can open 2:16the publish popover and see which pages 2:19have changes to be sure I didn't miss 2:21anything. I think we're good to go. So,2:23I'll click update to take all the 2:25changes live. Done deal. Cool. So, that 2:29takes care of some quick minor changes 2:31to a static page. Now, let's edit some 2:34CMS content. We can edit both CMS detail 2:36pages and collection list directly.2:39Let's start with the collection list,2:41which in Framer, we'd lay out and style 2:43on the canvas, but then we'd have to go 2:45into the CMS in order to edit the 2:47content. Now, with on page editing, we 2:50can directly edit any item we can see,2:52and our changes update in the CMS 2:54itself. See it, click it, edit it. That 2:58simple. But this all unlocks something 3:00bigger than just edits. And that's the 3:02ability for anyone to add entire pages.3:06When we jump into edit mode from a CMS 3:08page, we get a new button on the editor 3:10bar that says add page. I can click it 3:13to add a brand new item to this CMS 3:16collection and instantly get a new 3:18detail page to quickly and easily edit 3:20with placeholders for each CMS field.3:24And rich text fields give us a ton of 3:26additional control. On a new line, you 3:28can press forward slash to access the 3:30new inline editing menu to insert 3:32headings, formatted text, including 3:34lists, and even images, YouTube embeds,3:37and tables. And highlighting existing 3:40text reveals a new formatting toolbar 3:42where we can apply and switch headings,3:45tweak styling, and add links. YouTube 3:48embeds also get their own popover for 3:50extra control over autoplay and the 3:52quality of the thumbnail, while date 3:54fields get their own dedicated date 3:56picker. Seeing an actual site page 3:59coming to life on the site itself as 4:01you're typing is incredible. And it's 4:03easy to see how this allows truly 4:05everyone to edit a site with zero design 4:08experience. When I finish editing, any 4:11required field I missed will come up in 4:12a modal and give me a chance to get 4:14everything populated, including any 4:16fields that weren't necessarily visible 4:18on the page. Once we're all set, my new 4:21page will be saved as a draft item in 4:23the CMS, ready to be reviewed and 4:25published, just like the changes I made 4:27before. When Joseph added that new page,4:30I got notified via email right away. And 4:32I can click the view page button to jump 4:34directly to the draft CMS page in our 4:37Framer project. From here, if everything 4:40looks good to go, I can hit publish,4:42choose to undraft this, and then click 4:45update to take the new page live. And 4:48that's it. No back and forth, no 4:50guesswork. Now I can invite anyone to 4:52make realtime content updates that I can 4:54review and publish instantly using 4:57onpage editing for Framer sites.

Also coversCMS Fields CMS Pages / Dynamic Content Collection Lists Collections Components Frames Links Variables

Watch on YouTube ↗

‹ SEO Testing, Auditing & Launch Checklist (SEO Lesson 6)

Framer Event — Introducing On-Page Editing ›