Try our conversational search powered by Generative AI!

"epi-edit" attribute for simple OPE markup

Fixed in

EPiServer.CMS.UI 11.16.0

(Or a related package)


Dec 11, 2018


Jan 07, 2022




Closed, Acceptance tests pass


Provides a built in and simple HTML attribute to make elements editable in On-Page Edit:

It should be easy for front-end developers to use, so it should "just work" - meaning it does not have any specific behavior to learn about. It's equivalent to setting these properties, and setting these properties to any other value will be ignored:

  • data-epi-property-name="YourProperty": This attribute marks an element for editing
  • data-epi-property-render="none": This attribute prevents the DOM from being modified directly when editing
  • data-epi-property-edittype="floating": This attribute creates a dialog for editing, and should be used for string types

As with any data-epi attributes, they should preferably not be rendered in View mode (when the visitor sees the site). One way to consistently render this attribute is to look at the global `epi.beta.isEditable` property.

Basic usage:

Before 11.16.0

To make an element editable in On-Page Edit when rendered by a client-side framework (e.g. React, Angular, Vue, etc), it was necessary to add three attributes:

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

With 11.16.0

It's now enough with one simple attribute:

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

Read more here: