Skip to content

Flex Component Properties#

In Miva’s Flex Component system, the properties section of flex.json defines the configuration inputs shown to Page Builder users. These inputs directly determine what content and options are available in a component’s UI and how those values are passed into the rendering logic (instance.mvt).

This section introduces how Flex properties work, how to structure them in your component, and what types are available.

What is a Property?#

A property is a field that appears in the Page Builder UI when a Flex Component is selected. It corresponds to a specific input (text box, image picker, color selector, etc.) and can optionally include:

  • A code: used to reference the value in Miva templates
  • A prompt: the label shown in the Page Builder UI
  • A type: determines what kind of field is rendered

Each property in the properties array becomes a key in l.settings:instance.

Where Properties Go#

Defined in:

"properties": [
  {
    "code": "headline",
    "prompt": "Headline Text",
    "type": "text"
  }
]

Supported Property Types#

Miva supports a wide range of input types. Here’s a categorized reference of all available property types:

Category Types
Core Inputs text, textarea, checkbox, radio, select, selector, number, color, date, datetime, slider, distributedslider
Media & Content Pickers image, imagetype, link, fragment, texteditor, product, category
Lookup & Selector customlookup, productcustomfieldlookup
Configuration preview_component_selector, preview_property_selector, visibility-conditions, textsettings
Complex group, list
Theme Editor font, button, typography

How Properties Are Used#

Once defined, the value for each property is rendered into the component at runtime via:

&mvte:instance:<property_code>;

For object-based types (e.g. link, image, product, group), use:

&mvte:instance:cta:url;
&mvte:instance:main_image:image;
&mvte:instance:product:name;

Best Practices#

  • Use consistent code and prompt naming conventions
  • Choose the simplest property type that fits the need
  • Use group and list to organize or repeat complex content
  • Place less-used fields in advanced_properties
  • Always include defaults for required fields to support previewing

Next Steps#

Each property type has unique options and behavior. Continue exploring to see full documentation and examples for each: