Adobe Experience Manager Sites & More

VijayRa10 · 4/9/25

Hi all,

I'm working with Adobe Edge Delivery Services using the Universal Editor, and I'm trying to achieve a specific DOM structure for a block that outputs label + value pairs.

I want each field in my block (e.g., Title, Subtitle, CTA Label, Link) to render like this:

<div>
 <div>
  <p>Title</p>
  <p>Teaser title text added by user</p>
 </div>
</div>

…instead of just rendering the value, like this:

<div>
 <div>
  <p>Teaser title text added by user</p>
 </div>
</div>

This structure helps make the block output easier to debug, parse, and test, especially when fields are numerous.

My component-models.json looks like this:

{
"id": "teaser",
"fields": [
{ "component": "text", "name": "title", "label": "Title" },
{ "component": "text", "name": "subtitle", "label": "Subtitle" },
{ "component": "richtext", "name": "description", "label": "Description" },
{ "component": "text", "name": "cta1_label", "label": "CTA 1 Label" },
{ "component": "aem-content", "name": "cta1_link", "label": "CTA 1 Link" }
]
}

But the Universal Editor currently renders only the values:

<div>
 <div>
  <p>Teaser title text added by user</p>
 </div>
</div>

Is there a way to configure the model so that the Universal Editor automatically renders both the field label and its value (as separate <p> tags or similar) in the DOM?

Or is it expected that this kind of structure needs to be manually handled inside the decorate() function of the block’s JavaScript?

I'm trying to ensure that even when a field is left empty by the author, the output still clearly indicates which div corresponds to which field — so I can easily identify and style or fallback-handle them. If anyone has achieved this using key-value modeling or XWalk config, I’d really appreciate any tips!