text — plain text, edited in place. No markup is preserved; use it for headings, labels and
short strings.
richtext — formatted body copy. The stored value contains markup, so the rendering element
must be the element whose inner HTML is the property.
media — an image, video or other asset reference. Put it on the <img>/<video> itself.
container — a node whose children authors add, reorder and remove. Pair with
data-aue-filter.
component — one authored component, the unit that is selected, moved and deleted as a whole.
reference — a pointer to content living elsewhere (a Content Fragment, an Experience
Fragment). Edits follow the reference to its own resource.
Nesting rules
A component sits inside a container; props sit inside a component.
data-aue-resource establishes the base for everything beneath it. A nested data-aue-resource
re-bases its own subtree — use it when a region renders a different node, not for decoration.
Do not put data-aue-prop on an element that also carries data-aue-resource for a different
node; the property will be read against the wrong node.
The instrumented element must be the element that actually renders the value. Wrapping a
richtext prop on an outer <div> and rendering the markup in an inner one makes the editor
overwrite the wrapper.
Diagnosing "nothing is editable"
Work down this list; each failure looks the same on the rendered page.
Is cors.js loaded and the urn:adobe:aue:system:aemconnection meta tag present?
Does the connection point at an author environment the user can log in to?
Does the AEM author environment allow the app's origin (browser console will show the CORS
failure)?
Does the resource URN resolve to a real node in that environment?
Does each data-aue-prop match a property name on that node, including case?
Is the instrumentation present in the build being served? Strip it from public production
builds only, not from the preview build the editor loads.
# Universal Editor instrumentation reference
Verified 2026-09 against
<https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/developing/universal-editor/attributes-types>.
## Attributes
| Attribute | Goes on | Value | What breaks without it |
|---|---|---|---|
| `data-aue-resource` | The element representing a repository node | A resource URN, e.g. `urn:aemconnection:/content/site/en/home/jcr:content/hero` | Nothing below it is editable; no error is shown |
| `data-aue-prop` | The element rendering one property | The property name, exactly as stored | The field is selectable but never saves |
| `data-aue-type` | Any editable element | `text`, `richtext`, `media`, `container`, `component`, `reference` | The editor cannot choose an editing affordance |
| `data-aue-label` | Any instrumented element | Display name | Authors see a path instead of a name |
| `data-aue-filter` | A `container` | The id of the allowed-components filter | Authors may insert anything |
| `data-aue-model` | A `component` or item | The model id backing the item | New items are created without a schema |
## Types
- **`text`** — plain text, edited in place. No markup is preserved; use it for headings, labels and
short strings.
- **`richtext`** — formatted body copy. The stored value contains markup, so the rendering element
must be the element whose inner HTML is the property.
- **`media`** — an image, video or other asset reference. Put it on the `<img>`/`<video>` itself.
- **`container`** — a node whose children authors add, reorder and remove. Pair with
`data-aue-filter`.
- **`component`** — one authored component, the unit that is selected, moved and deleted as a whole.
- **`reference`** — a pointer to content living elsewhere (a Content Fragment, an Experience
Fragment). Edits follow the reference to its own resource.
## Nesting rules
- A `component` sits inside a `container`; props sit inside a `component`.
- `data-aue-resource` establishes the base for everything beneath it. A nested `data-aue-resource`
re-bases its own subtree — use it when a region renders a *different* node, not for decoration.
- Do not put `data-aue-prop` on an element that also carries `data-aue-resource` for a different
node; the property will be read against the wrong node.
- The instrumented element must be the element that actually renders the value. Wrapping a
`richtext` prop on an outer `<div>` and rendering the markup in an inner one makes the editor
overwrite the wrapper.
## Diagnosing "nothing is editable"
Work down this list; each failure looks the same on the rendered page.
1. Is `cors.js` loaded and the `urn:adobe:aue:system:aemconnection` meta tag present?
2. Does the connection point at an **author** environment the user can log in to?
3. Does the AEM author environment allow the app's origin (browser console will show the CORS
failure)?
4. Does the resource URN resolve to a real node in *that* environment?
5. Does each `data-aue-prop` match a property name on that node, including case?
6. Is the instrumentation present in the build being served? Strip it from public production
builds only, not from the preview build the editor loads.