Controls Reference

Controls are the active input components representing CSS properties or HTML attributes that the template developer allows the user to change. All controls share common base parameters but also have specific configurations depending on their type.

Base control

Most controls share these core properties. Depending on the control type, these map to the DOM or CSS rules.

Hide show properties

string

required

Unique identifier for the control.

type

string

required

The type of control (e.g., text, media, slider).

label

string

Human-readable label for the UI interface.

selector

string

CSS selector to target elements (e.g., {{WRAPPER}} h1).

selectors

record

CSS rules map. Key is selector, value is rule (e.g., color: {{VALUE}};).

attribute

string

DOM attribute to modify when mapping directly to HTML
(e.g., src, textContent).

default

any

Default value for the control when first rendered.

show_if

string

Conditional visibility logic evaluated inside Squeditor
(e.g., "{{layout}} === 'custom'").
Read more about Conditional Display

description

string

Helper text displayed below the control in Squeditor sidebar.

label_block

boolean

If true, forces the label to display on its own row above the input.

ai_enabled

boolean

Enables AI generation for compatible controls.

ai_config

object

Configuration for AI text or media generation defaults.

Learn more about AI Configuration.

Text

Used for simple single-line string values (headings, buttons, short inputs). Supports real-time preview and AI writing generation.

{
  "id": "heading_text",
  "label": "Heading",
  "type": "text",
  "selector": "{{WRAPPER}} .title",
  "attribute": "textContent",
  "default": "Use Data & AI, Responsibly",
  "ai_enabled": true,
  "ai_config": {
    "type": "headline",
    "max_length": 40,
    "prompt": "Generate a compelling headline for a SaaS business tool",
    "variations": 3
  },
  "label_block": true
}

Show Text Properties

type

string

required

Must be "text".

selector

string

CSS selector to target elements.

attribute

string

Target attribute (usually textContent).

ai_enabled

boolean

Enables AI writing assistant.

ai_config

object

See AI configuration reference

Textarea

Used for multi-line text blocks (descriptions, content bodies). Provides a larger input area.

{
  "id": "description",
  "label": "Description",
  "type": "textarea",
  "selector": "{{WRAPPER}} .desc",
  "attribute": "textContent",
  "default": "Unlock your productivity...",
  "rows": 4,
  "ai_enabled": true
}

Show Textarea Properties

type

string

required

Must be "textarea".

rows

number

Number of visible text rows in Squeditor.

ai_enabled

boolean

Enables AI text generation support.

ai_config

object

See AI configuration reference

Heading

Used to inject non-editable separator titles in Squeditor sidebar to group related visual settings visually. It is not an input control it just a separator.

{
  "id": "your_heading",
  "type": "heading",
  "label": "Heading Separator",
  "separator": "before"
}

Show Heading Properties

type

string

required

Must be "heading".

label

string

The text to display as a heading in Squeditor sidebar.

separator

string

Add a line separator "before" or "after" the heading.

Color

Color picker with alpha support. Can inject CSS variables or apply styles directly.

{
  "id": "primary",
  "label": "Primary Brand",
  "type": "color",
  "default": "#048676"
}

Show Color Properties

type

string

required

Must be "color".

default

string

Default hex or rgba color code.

selectors

object

Map of CSS rules (e.g., "background-color: {{VALUE}};").

Typography

Selector for global font variables or family assignments.

{
  "id": "heading",
  "label": "Headings Font",
  "type": "typography",
  "default": "Sunsive"
}

Show Typography Properties

type

string

required

Must be "typography".

default

string

Default font-family name.

Media

Integration with the Media Library for Images and Videos.

{
  "id": "user_image",
  "label": "Image",
  "type": "media",
  "selector": "img",
  "attribute": "src",
  "media_type": "image",
  "default": "/templates/lexend/assets/images/avatars/02.jpg",
  "ai_enabled": true,
  "ai_config": {
    "type": "image",
    "aspect_ratio": "1:1"
  }
}

Show Media Properties

type

string

required

Must be "media".

media_type

string

required

"image", "video", or "all".

max_file_size

number

Max file size allowed in bytes (e.g., 5242880 for 5MB).

ai_enabled

boolean

Enables AI image generation.

ai_config

object

See AI configuration reference

Select

A dropdown menu control for selecting predefined choices.

{
  "id": "section_container",
  "label": "Container",
  "type": "select",
  "selector": "{{WRAPPER}} .section-outer > *",
  "attribute": "class",
  "options": [
    { "value": "container", "label": "Default" },
    { "value": "container-fluid", "label": "Full Width" },
    { "value": "custom", "label": "Custom" }
  ],
  "default": "container"
}

Show Select Properties

type

string

required

Must be "select".

options

array

required

Array containing object choices for the dropdown.

Show Option Structure

value

string

required

The raw code value inserted.

label

string

required

The human-readable title of the option.

Slider

A responsive range slider control, perfect for widths, text sizing, or capacities.

{
  "id": "section_container_width",
  "label": "Container Custom Width",
  "type": "slider",
  "responsive": true,
  "size_units": ["px", "%", "vw", "rem"],
  "range": {
    "px": { "min": 200, "max": 1600, "step": 8 },
    "%": { "min": 0, "max": 100, "step": 1 }
  },
  "default": {
    "desktop": { "size": 1200, "unit": "px" },
    "tablet": { "size": 90, "unit": "%" },
    "mobile": { "size": 100, "unit": "%" }
  },
  "selectors": {
    "{{WRAPPER}} .section-outer > *": "max-width: {{SIZE}}{{UNIT}} !important; margin: 0 auto !important;"
  }
}

Show Slider Properties

type

string

required

Must be "slider".

responsive

boolean

If true, lets users set separate mobile/tablet/desktop values.

size_units

array

Allowed CSS units (["px", "%", "em", "vw"]).

range

object

Object mapping min, max, and step validation limits for each unit type.

default

object|number

A plain number or a responsive mapping object defining default sizes per device.

Dimensions

A linked, 4-sided (Top/Right/Bottom/Left) numerical input for margin, padding, or border-radius properties.

{
  "id": "section_padding",
  "label": "Padding",
  "type": "dimensions",
  "responsive": true,
  "size_units": ["px", "%", "em", "rem", "vh", "vw"],
  "default": {
    "desktop": { "top": 80, "right": 0, "bottom": 80, "left": 0, "unit": "px", "isLinked": false },
    "tablet": { "top": 64, "right": 0, "bottom": 64, "left": 0, "unit": "px", "isLinked": false },
    "mobile": { "top": 40, "right": 0, "bottom": 40, "left": 0, "unit": "px", "isLinked": false }
  },
  "selectors": {
    "{{WRAPPER}} .section-outer": "padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;"
  }
}

Show Dimensions Properties

type

string

required

Must be "dimensions".

responsive

boolean

Enables breakpoint behavior.

size_units

array

Available units.

default

object

Maps values top, right, bottom, left, unit, and boolean isLinked.

Number

Basic number input component for generic counting variables (like items-per-view) or basic size rules.

{
  "id": "form_submit_fontSize_new",
  "label": "Button Font Size",
  "type": "number",
  "responsive": true,
  "size_units": ["px", "em", "rem"],
  "min": 10,
  "max": 50,
  "default": {
    "desktop": { "size": 18, "unit": "px" }
  },
  "selectors": {
    "{{WRAPPER}} .cta-button": "font-size: {{SIZE}}{{UNIT}} !important;"
  }
}

Show Number Properties

type

string

required

Must be "number".

min

number

Minimum value.

max

number

Maximum valid value.

responsive

boolean

Boolean layout responsive state.

Icon

Used to load specific icon classnames directly to DOM elements. Uses an icon picker.

{
  "id": "feat_icon",
  "label": "Icon",
  "type": "icon",
  "selector": ".icon-box > *",
  "attribute": "className",
  "default": "unicon-search",
  "label_block": false
}

Show Icon Properties

type

string

required

Must be "icon".

attribute

string

The literal DOM attribute that stores the icon font prefix (e.g. "className").

default

string

String of the default CSS icon class.

Repeater

Complex control used to manage lists of repetitive elements (e.g., FAQ accordions, pricing tiers, testimonial grids). Repeaters load a sub-array of nested Controls for every repeating DOM slice.

{
  "id": "faq_repeater",
  "label": "Items",
  "type": "repeater",
  "selector": "{{WRAPPER}} ul.uc-accordion-divider > li",
  "fields": [
    {
      "id": "question",
      "label": "Question",
      "type": "text",
      "selector": ".uc-accordion-title",
      "attribute": "textContent"
    },
    {
      "id": "answer",
      "label": "Answer",
      "type": "textarea",
      "selector": ".uc-accordion-content",
      "attribute": "textContent"
    }
  ],
  "default": [
    { "question": "Example?", "answer": "Example answer." }
  ],
  "title_field": "question",
  "prevent_empty": 1
}

Show Repeater Properties

type

string

required

Must be "repeater".

selector

string

required

The exact CSS rule that selects the specific repetitive wrapper inside your parent block.

fields

array

required

An array containing child Controls acting as template schema variables.

default

array

An array grouping identical properties mapped from fields simulating live items.

title_field

string

Which relative variable child ID identifies the label assigned to its active row in array configuration mode.

prevent_empty

number

Minimum threshold volume (defaults restrict clearing rows below boundary).

per_page

number

Limits the maximum objects loading automatically before enabling slicing capabilities.

Getting started

Configuration

Components

Other

Base control

Text

Textarea

Heading

Color

Typography

Media

Select

Slider

Dimensions

Number

Icon

Repeater

​Base control

​Text

​Textarea

​Heading

​Color

​Typography

​Media

​Select

​Slider

​Dimensions

​Number

​Icon

​Repeater

Base control

Text

Textarea

Heading

Color

Typography

Media

Select

Slider

Dimensions

Number

Icon

Repeater