Documentation Index Fetch the complete documentation index at: https://docs.squeditor.com/llms.txt
Use this file to discover all available pages before exploring further.
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.
Unique identifier for the control.
The type of control (e.g., text, media, slider).
Human-readable label for the UI interface.
CSS selector to target elements (e.g., {{WRAPPER}} h1).
CSS rules map. Key is selector, value is rule (e.g., color: {{VALUE}};).
DOM attribute to modify when mapping directly to HTML src, textContent).
Default value for the control when first rendered.
Helper text displayed below the control in Squeditor sidebar.
If true, forces the label to display on its own row above the input.
Enables AI generation for compatible controls.
Configuration for AI text or media generation defaults. AI Configuration . 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 }
CSS selector to target elements.
Target attribute (usually textContent).
Enables AI writing assistant.
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 }
Number of visible text rows in Squeditor.
Enables AI text generation support.
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" }
The text to display as a heading in Squeditor sidebar.
Add a line separator "before" or "after" the heading.
Color picker with alpha support. Can inject CSS variables or apply styles directly.
{ "id" : "primary" , "label" : "Primary Brand" , "type" : "color" , "default" : "#048676" }
Default hex or rgba color code.
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
Default font-family name.
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" } }
"image", "video", or "all".
Max file size allowed in bytes (e.g., 5242880 for 5MB).
Enables AI image generation.
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" }
Array containing object choices for the dropdown. The raw code value inserted.
The human-readable title of the option.
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;" } }
If true, lets users set separate mobile/tablet/desktop values.
Allowed CSS units (["px", "%", "em", "vw"]).
Object mapping min, max, and step validation limits for each unit type.
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
Enables breakpoint behavior.
Maps values top, right, bottom, left, unit, and boolean isLinked.
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;" } }
Boolean layout responsive state.
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 }
The literal DOM attribute that stores the icon font prefix (e.g. "className").
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 }
The exact CSS rule that selects the specific repetitive wrapper inside your parent block.
An array containing child Controls acting as template schema variables.
An array grouping identical properties mapped from fields simulating live items.
Which relative variable child ID identifies the label assigned to its active row in array configuration mode.
Minimum threshold volume (defaults restrict clearing rows below boundary).
Limits the maximum objects loading automatically before enabling slicing capabilities.
