---
title: On-page edit
slug: cms-13/docs/on-page-editing-view
docTags: 
createdAt: 2026-07-30T20:22:11.023Z
---

:::hint{type="info"}
**Note**
If you also want the **On-page edit** view, a developer must enable it in code. In `Startup.cs`, configure `CmsFeatureOptions` so that `SectionsVisibility.OnPageEditing` is true.

```csharp
using EPiServer.Cms.Shell.UI.Configurations;

services.Configure<CmsFeatureOptions>(options =>
{
    options.SectionsVisibility.OnPageEditing = true;
});
```
:::

On-page editing lets you edit content directly on the rendered page rather than in the Visual Builder outline. This editing mode is useful when you want to see exactly how your changes look in context as you make them.

All content displays in the [Visual Builder](docId\:poWrdQQWhlJ7bQg3Sxoal) by default. Switch to on-page editing for pages and shared block content only. Experiences use only Visual Builder.

For pages and shared block content, you can switch from the Visual Builder to on-page editing by clicking **Select view > On-Page Editing**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/kBuuKIhp9Uqv9UilD4vK__bae13dc879735147e8ea3f512fef695b8ed3b427f3d38746cf6aa0c4faa6cbf1-image.png)

From here, you can start editing content; the areas available for editing are highlighted, as shown in the following image.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/SzUFYulNrOLeWgaVs0cId_ba5a44256adde8975f34f9534e980fc3cbfb80c85ed87715c72a27d35e64a827-image.png)

The available areas depend on how the page type is defined. Each area is configured with a property type that controls what you edit in that area. For example, one area has an image property type for images. Another area has a page description property for text. The editing options when clicking an area depend on the property type. Typically, for a page, edit the page name, description, the main editorial area, and a content area with shared blocks.

:::hint{type="info"}
**Note**
Areas and properties available for editing are implementation-specific and depend on the property type and how the rendering is built on your application.
:::

## Edit a page with on-page editing

This example describes how to edit a page, but the procedure is similar when editing [shared blocks](docId\:GgZHc3ipw47sReI5vLRVY).

1. Select the page to edit from the page tree in the navigation pane.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/tTfs5e6wpkF91o1gj3meM_fef475a1a20cae1f67d45f05eda566e87f0e2a51d4b63b40ba21fb071cc1f1a9-image.png)

2. Click an area to edit (property names are displayed on mouse-over).
3. Make your changes by updating the content properties as needed. For updating rich text content, see [Edit content using TinyMCE](docId\:DayuLEILGFjNErMEFIEmK).

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/_W1yHwp4K38_zdmDG_WKc_186d02e04d53fbe3611fd8b1c444032ef237265baa1ff009d8197fcb5380e924-image.png)

Your changes save automatically in a draft version of the content.

4. Click **Preview** at any time to see what the published version will look like.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/dpu7GTLzcmPioozfj5bRb_ce871fc8240d4996fed03f82e2c189fbe9df6ea95a3c6aee2cd2ae633c85e715-image.png)

5. Click **Publish > Publish Changes** to publish the content when ready.