preview_property_selector#

The preview_property_selector field is used at the property level to connect that property to a specific DOM element inside the Flex Component. When the property value changes in Page Builder, the corresponding node in the preview updates in real time.

This is optional but recommended for any visible or style-affecting property.

`preview_property_selector` Definition#

This field is added inside a property definition:

{
  "code": "heading_color",
  "prompt": "Heading Color",
  "type": "color",
  "preview_property_selector": ".hero__heading"
}

In this case, Page Builder will look for the .hero__heading element and apply the new value during admin preview when the user updates the heading_color.

Syntax#

Use a CSS selector string that matches the element in your instance_template.

Example:

"preview_property_selector": ".card__background"

Advanced example with shadow DOM scoping:

"preview_property_selector": ".tile :shadow .heading"

Note

Miva will split on spaces within the preview_property_selector and attempt to find each element in order. If, at any point, the “next” element cannot be found, the previous one will be used. If no previous element is found at all, the root-level component element (as defined by preview_component_selector) will be used as the fallback target.

This logic allows for graceful degradation in dynamic or conditional DOM structures.

Supported Property Types#

You can use preview_property_selector with many different property types, including:

text
texteditor
color
select
radio
slider
checkbox
image
fragment
productcustomfieldlookup

The feature works across content, style, and behavior-based properties.

Supported Tokens#

You can use dynamic tokens to ensure your selector works in nested, repeated, or structured components:

Token	Description
`%component_code%`	Component code
`%sequence_code%`	Enclosing sequence code
`%sequence_item_code%`	Sequence item code
`%element_code%`	Element layout code (grid/carousel etc.)
`%element_item_code%`	Element item code

These are replaced automatically at runtime by Page Builder when rendering the preview.

Complete Example#

{
  "code": "background_color",
  "prompt": "Background Color",
  "type": "color",
  "preview_property_selector": ".card"
}

If your instance_template contains:

<div class="card">...</div>

Then selecting a color in Page Builder will apply it directly to .card in the live preview without saving.

Limitations#

Only works in admin preview — it does not affect live site output.
Must reference a valid, rendered element from the instance template.
Only one selector per property (but it can match multiple elements).
Dynamic tokens must resolve to unique values per component instance.
Preview targeting will gracefully fall back to the last successful selector or the component root.

Best Practices#

Always use preview_property_selector for visual or styled fields (e.g., text, image, color).
Avoid generic classes like .container or .text — be precise and scoped.
When building reusable components, use tokenized selectors for consistency.
Combine with preview_component_selector to create a complete live preview system.
Ensure the fallback behavior described above does not lead to unexpected updates in complex DOM trees.

preview_property_selector#