Event, CMS

Framer Event — Introducing On-Page Editing

7:29

12K views

Aug 6, 2025

About this lesson

The next chapter in how you create, edit, and publish begins. Join us for a quick, exciting feature drop on August 6, 10AM PDT.

Add the event to your calendar:

https://framer.link/next-chapter

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

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

Watch on YouTube ↗

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

Using the Appear Effect in Framer (Animation Lesson 6) ›