---
title: On-page editing with client-side rendering
slug: cms-11/dev-docs/on-page-editing-with-client-side-rendering
docTags: 
createdAt: 2026-07-22T19:45:21.284Z
---

Optimizely Content Management System (CMS) offers some features to make client-side rendering easier. These features are framework agnostic so that you can use them with any JavaScript framework, such as Angular, React, or Vue.

## Edit HTML attributes

CMS UI provides the attribute `data-epi-edit` that you can add to editable DOM elements:

```xml
<span data-epi-edit="YourProperty">
  {your JS framework decides how the value is actually rendered}
</span>
```

Using `data-epi-edit="YourProperty"` is equivalent to adding three other HTML attributes as below:

```xml
<span data-epi-property-name="YourProperty" 
      data-epi-property-render="none" 
      data-epi-property-edittype="floating">
  {your JS framework decides how the value is actually rendered}
</span>
```

- `data-epi-property-name="YourProperty"`
  This attribute marks an element for editing.
- `data-epi-property-render="none"`
  This attribute prevents the DOM from being directly modified when editing. Using `data-epi-property-edittype="inline"` overrides this and will modify the DOM ("inline" is the default for string properties).
- `data-epi-property-edittype="floating"`
  Use this attribute to create a dialog box for editing and string types.

### Edit HTML attributes for blocks

Editable blocks rendered in a content area should have this HTML attribute on each block element:

- `data-epi-block-id="ContentLinkID"`
  This attribute marks a block element for editing.

## Re-rendering

To know when to re-render, subscribe to the topic **contentSaved**. The controller must contain the attribute` [RequireClientResources]` unless it inherits from `PageController` or `ContentController`, as these include the attribute by default. The resources then need to be required in a razor view with other scripts for the site `using @Html.RequiredClientResources("Footer")`.

## Handle context modes

To properly apply edit overlays and turn client-side routing on or off as needed, the client requires some indicator of the current context mode. For this purpose, Optimizely provides the following properties in the epi object :

- `inEditMode`
  True in edit mode and preview mode
- `isEditable`
  True in edit mode and false in preview mode
- `ready`
  True if the property `isEditable` was initialized. Otherwise, subscribe to `epiReady` to get those properties when they are available

## Navigate in on-page edit

There are two requirements to update the editing context (page tree, for this page folders, and so on) when navigating the site by clicking links in the preview iframe. You must hyperlink the links with an `<a>` tag and the `href` attribute must be an "edit mode" URL. Details are in the blog post [Routing in an SPA with a working On-Page Editing experience](https://world.optimizely.com/blogs/Nicklas-Israelsson/Dates/2018/10/routing-in-a-spa-with-a-working-on-page-editing-experience-cms-ui-11-11-0/) by Nicklas Israelsson.

## Content delivery API

CMS has released a content delivery API to simplify headless implementation. See [Content Delivery API](docId:8J9LUIz7eXbqvAd-I62ve).

## SPA template site

To demonstrate some useful concepts when creating a Single Page Application (SPA) while working on-page editing, see [the MusicFestical SPA template site on Github](https://github.com/episerver/musicfestival-vue-template). For descriptions of the template site, see the blog post [Introducing a new SPA template site: MusicFestival](https://world.optimizely.com/blogs/john-philip-johansson/dates/2018/10/introducing-a-new-template-site-for-spas-musicfestival/).

## Recommended blog series

1. [Introducing a new SPA template site: MusicFestival](https://world.optimizely.com/blogs/john-philip-johansson/dates/2018/10/introducing-a-new-template-site-for-spas-musicfestival/)
2. [Routing in a SPA with a working On-Page Editing experience (CMS UI 11.11.0)](https://world.optimizely.com/blogs/Nicklas-Israelsson/Dates/2018/10/routing-in-a-spa-with-a-working-on-page-editing-experience-cms-ui-11-11-0/)
3. [Tips and tricks for a great On-Page Editing experience in SPAs and other client side rendered sites](https://world.optimizely.com/blogs/john-philip-johansson/dates/2018/10/tips-and-tricks-for-a-great-on-page-editing-experience-in-spas-and-other-client-side-rendered-sites/)
4. [Represent the concept of "pages" and "blocks" with client-side components in a SPA](https://world.optimizely.com/blogs/Nicklas-Israelsson/Dates/2018/10/represent-the-concept-of-pages-and-blocks-with-matching-client-side-components-in-a-spa/)

## Blog posts

- [Taking control of client-side rendering in OPE](https://world.optimizely.com/blogs/john-philip-johansson/dates/2017/10/taking-control-of-client-side-rendering-in-ope-beta/)
- [Taking more control of client-side rendering in OPE](https://world.optimizely.com/blogs/john-philip-johansson/dates/2017/12/taking-more-control-of-client-side-rendering-in-ope-beta2/)
- ["domUpdated" is no longer needed](https://world.optimizely.com/blogs/john-philip-johansson/dates/2018/3/domupdated-is-no-longer-needed-beta-cms-ui-11-4-0/)
- [One OPE attribute to rule them all: data-epi-edit](https://world.optimizely.com/blogs/john-philip-johansson/dates/2019/1/one-ope-attribute-to-rule-them-all-data-epi-edit-cms-ui-11-16-0/)
- [Designing frontends for OPE without wrapping elements](https://world.optimizely.com/blogs/john-philip-johansson/dates/2018/4/designing-frontends-for-ope-without-wrapping-elements/)