textsettings#

The textsettings property defines a grouped UI for editing multiple visual text styles at once. It’s designed for use with text elements like headings, body text, buttons, and labels — allowing admins to control font color, size, weight, alignment, and more from a single panel.

This property can either be defined as a top-level property (type: "textsettings") or nested inside a supporting property like text, texteditor, or textarea.

`textsettings` Definition#

{
  "code": "heading_text",
  "prompt": "Heading",
  "type": "text",
  "textsettings": {
    "fields": [
      {
        "code": "font_size",
        "prompt": "Font Size",
        "type": "text",
        "text_type": "number",
        "label": "px",
        "style": "font-size",
        "pseudoclasses": ["normal", "hover"]
      }
    ]
  }
}

Supported Fields#

Field	Type	Required	Description
`type`	string	Yes	Must be `"textsettings"` and defined under a compatible property
`code`	string	Yes	Unique key used in `l.settings:instance`.
`prompt`	string	Yes	Label shown in the admin interface.
`fields`	array	Yes	Sub-properties that map to CSS styles
`preview_property_selector`	string	No	Used to target preview DOM nodes.
`pseudoclasses`	array of strings	No	Can be `["normal"]`, `["hover"]`, or both

Field Behavior: `fields`#

Each entry in the fields array is a standard Flex property type (text, color, select, etc.) with an added style key for CSS mapping.

Example field:

{
  "code": "font_size",
  "type": "text",
  "text_type": "number",
  "style": "font-size",
  "label": "px"
}

These fields define how each property gets rendered and styled during preview and output.

Field Behavior: `pseudoclasses`#

If defined globally or per-field, the component renders input tabs for normal and/or hover state overrides.

"pseudoclasses": ["normal", "hover"]

Field values will be stored under those keys.

`l.settings:instance` Structure#

When used inside another property, such as type: "text", the data is stored under a textsettings object in l.settings:instance.

:heading_text:textsettings:fields:normal:font_size:value=24
:heading_text:textsettings:fields:hover:font_size:value=28
:heading_text:textsettings:styles:normal=font-size:24px;
:heading_text:textsettings:styles:hover=font-size:28px;
:heading_text:textsettings:styles:classname=flex_a1b2c3

fields contains per-state values.
styles holds the rendered CSS strings.
classname is a dynamically generated class used for injection/styling.

Template Usage#

You can use textsettings.styles.normal directly in your class or style attributes:

<h2 class="heading &mvte:instance:heading_text:textsettings:styles:classname;" style="&mvte:instance:heading_text:textsettings:styles:normal;">
  &mvte:instance:heading_text:value;
</h2>

Best Practices#

Use textsettings for any component that needs reusable typography and style controls.
Include style in all sub-fields — it’s required for rendering.
Always test both normal and hover states for expected behavior.
Use text_type: "number" with text fields for consistent input UX.

textsettings#

textsettings Definition#