textarea#

The textarea property provides a multi-line input for long-form content such as descriptions, blurbs, summaries, or narrative fields. It supports text formatting, preview styling, and optional Markdown rendering.

`Textarea` Definition#

{
  "code": "description",
  "prompt": "Description",
  "type": "textarea",
  "placeholder": "Enter a short description",
  "required": true,
  "markdown": true,
  "preview_property_selector": "p[data-description]",
  "visibility_conditions": {
    "depends_on": {
      "show_description": { "value": 1 }
    }
  },
  "textsettings": {
    "fields": [
      {
        "code": "font_size",
        "type": "text",
        "style": "font-size",
        "pseudoclasses": ["normal"]
      }
    ]
  }
}

Supported Fields#

Field	Type	Required	Description
`code`	string	Yes	Unique key used in `l.settings:instance`.
`prompt`	string	Yes	Label shown in the admin interface.
`type`	string	Yes	Must be `"textarea"`.
`placeholder`	string	No	Placeholder text shown in the input.
`required`	boolean	No	Marks field as required.
`markdown`	boolean	No	Enables rich content preview (if `true`).
`textsettings`	object	No	Typography settings for frontend output.
`validation_pattern`	string	No	RegEx rule for validation of input.
`validation_message`	string	No	Error message for validation_pattern.
`preview_property_selector`	string	No	Target element for PageBuilder Inspector.
`visibility_conditions`	object	No	Shows/hides field based on logic.

Field Behavior: `markdown`#

The markdown field is unique to the textarea property type. When set to true, PageBuilder will offer a toggle allowing admins to switch between a raw text input view and a rendered Markdown preview.

Markdown formatting is processed at runtime in templates. The output will render the HTML syntax of the Markdown applied.

Example:

{
  "code": "blurb",
  "type": "textarea",
  "prompt": "Short Blurb",
  "markdown": true,
  "placeholder": "Enter a marketing message..."
}

`l.settings:instance` Output with Markdown#

:blurb:value=%3Cp%3E%3Cstrong%3EThis+is+bold%3C%2Fstrong%3E+and+%3Cem%3Ethis+is+italic%3C%2Fem%3E.%3C%2Fp%3E%0A

Unencoded Value:

:blurb:value=<p><strong>This is bold</strong> and <em>this is italic</em>.</p>

You will receive the HTML syntax in l.settings:instance, so you can process it in the template however you’d like.

`l.settings:instance` Structure#

:description:value=This is a long paragraph of content.
:description:textsettings:styles:classname=flex_xyz999

Template Usage#

<p data-description class="&mvte:instance:description:textsettings:styles:classname;">
  &mvte:instance:description:value;
</p>

JavaScript Access#

<script>
  const instance = <mvt:eval expr="miva_json_encode( l.settings:instance, '' )" />;
  const content = instance.description.value;
</script>

Best Practices#

Use markdown: true for content that may require formatting.
Use textsettings for consistent, scoped typography.
Set reasonable maxlength if used in constrained layouts.
Apply visibility_conditions to show based on user choice.

Complete Example#

{
  "code": "body",
  "prompt": "Body Copy",
  "type": "textarea",
  "placeholder": "Enter content here...",
  "required": true,
  "markdown": true,
  "preview_property_selector": "div[data-body]",
  "visibility_conditions": {
    "depends_on": {
      "enable_body": { "value": 1 }
    }
  },
  "textsettings": {
    "fields": [
      {
        "code": "font_color",
        "type": "color",
        "style": "color",
        "pseudoclasses": ["normal"]
      },
      {
        "code": "font_size",
        "type": "text",
        "style": "font-size",
        "text_type": "number",
        "pseudoclasses": ["normal"]
      }
    ]
  }
}