{ "x": { "attrType": "regular", "types": [ "number", "string" ], "defaultValue": 0, "reactive": true, "description": "The x position of the Element in pixels (or percentage), relative to its parent - allows negative values and decimals.", "usedIn": [ "Element", "Text", "Layout", "RouterView", "Component" ] }, "y": { "attrType": "regular", "types": [ "number", "string" ], "defaultValue": 0, "reactive": true, "description": "The y position of the Element in pixels (or percentage), relative to its parent - allows negative values and decimals.", "usedIn": [ "Element", "Text", "Layout", "RouterView", "Component" ] }, "z": { "attrType": "regular", "types": [ "number" ], "defaultValue": 0, "reactive": true, "description": "The z index of the element.", "usedIn": [ "Element", "Text", "Layout", "RouterView" ] }, "w": { "attrType": "regular", "types": [ "number", "string" ], "defaultValue": 0, "reactive": true, "description": "The width of the element in pixels or percentage (e.g., \"50%\"). Allows decimals.", "usedIn": [ "Element", "Text", "RouterView" ] }, "h": { "attrType": "regular", "types": [ "number", "string" ], "defaultValue": 0, "reactive": true, "description": "The height of the element in pixels or percentage (e.g., \"50%\"). Allows decimals.", "usedIn": [ "Element", "Text", "RouterView" ] }, "zIndex": { "attrType": "regular", "types": [ "number" ], "defaultValue": 0, "reactive": true, "description": "The z-index of the element. Alias for z.", "usedIn": [ "Element", "Text", "Layout", "RouterView" ] }, "width": { "attrType": "regular", "types": [ "number", "string" ], "defaultValue": 0, "reactive": true, "description": "The width of the element in pixels or percentage. Allows negative values and decimals. Alias for w.", "usedIn": [ "Element", "Text", "RouterView" ] }, "height": { "attrType": "regular", "types": [ "number", "string" ], "defaultValue": 0, "reactive": true, "description": "The height of the element in pixels or percentage. Alias for h.", "usedIn": [ "Element", "Text", "RouterView" ] }, "color": { "attrType": "regular", "types": [ "string", { "type": "object", "properties": { "top": { "type": "string" }, "bottom": { "type": "string" }, "left": { "type": "string" }, "right": { "type": "string" } } } ], "defaultValue": "transparent", "reactive": true, "description": "The color of the Element. Accepts hexadecimal, hex with alpha, hex shorthands, RGB, RGBA, HTML color names, or an object with top/bottom/left/right keys for linear gradients.", "usedIn": [ "Element", "Text", "Layout", "RouterView" ] }, "alpha": { "attrType": "regular", "types": [ "number" ], "defaultValue": 1, "reactive": true, "description": "The alpha attribute controls the opacity of the element. Allows values between 0 (fully transparent) and 1 (fully visible).", "usedIn": [ "Element", "Text", "Layout", "RouterView", "Component" ] }, "rotation": { "attrType": "regular", "types": [ "number" ], "defaultValue": 0, "reactive": true, "description": "Rotates the Element. Accepts positive and negative values in degrees.", "usedIn": [ "Element", "Text", "Layout", "RouterView" ] }, "scale": { "attrType": "regular", "types": [ "number", { "type": "object", "properties": { "x": { "type": "number" }, "y": { "type": "number" } } } ], "defaultValue": 1, "reactive": true, "description": "Scales the element. Accepts a single number for uniform scaling or an object {x, y} for independent axis scaling. Values below 1 scale down, above 1 scale up.", "usedIn": [ "Element", "Text", "Layout", "RouterView", "Component" ] }, "mount": { "attrType": "regular", "types": [ "number", { "type": "object", "properties": { "x": { "type": "number" }, "y": { "type": "number" } } } ], "defaultValue": 0, "reactive": true, "description": "Sets the mount point of the Element. Accepts a single number or an object {x, y} with values between 0 and 1. Default {x: 0, y: 0} is the top-left corner.", "usedIn": [ "Element", "Text", "Layout", "RouterView" ] }, "pivot": { "attrType": "regular", "types": [ "number", { "type": "object", "properties": { "x": { "type": "number" }, "y": { "type": "number" } } } ], "defaultValue": 0.5, "reactive": true, "description": "Sets the pivot point for rotation and scaling. Accepts a single number or an object {x, y} with values between 0 and 1. Default {x: 0.5, y: 0.5} is the center.", "usedIn": [ "Element", "Text", "Layout", "RouterView" ] }, "border": { "attrType": "regular", "types": [ "number", { "type": "object", "properties": { "width": { "type": "number" }, "top": { "type": "number" }, "right": { "type": "number" }, "bottom": { "type": "number" }, "left": { "type": "number" }, "color": { "type": "string" } } } ], "defaultValue": "undefined", "reactive": true, "description": "Apply a border, default color is white.", "usedIn": [ "Element" ] }, "rounded": { "attrType": "regular", "types": [ "number", { "type": "object", "properties": { "radius": { "type": "number" }, "top-left": { "type": "number" }, "top-right": { "type": "number" }, "bottom-right": { "type": "number" }, "bottom-left": { "type": "number" } } } ], "defaultValue": "undefined", "reactive": true, "description": "Apply a to corners, or (a) specific corner(s)", "usedIn": [ "Element" ] }, "shadow": { "attrType": "regular", "types": [ { "type": "object", "properties": { "x": { "type": "number" }, "y": { "type": "number" }, "blur": { "type": "number" }, "spread": { "type": "number" }, "color": { "type": "string" } } } ], "defaultValue": "undefined", "reactive": true, "description": "Apply a to corners, or (a) specific corner(s)", "usedIn": [ "Element" ] }, "shader": { "attrType": "regular", "types": [ "string", "object" ], "defaultValue": null, "reactive": true, "description": "Enable a specific shader to apply.", "usedIn": [ "Element" ] }, "clipping": { "attrType": "regular", "types": [ "enum" ], "values": [ "true", "false" ], "defaultValue": "false", "reactive": true, "description": "Clips child content to the element's width and height boundaries.", "usedIn": [ "Element", "Text", "RouterView" ] }, "clipradius": { "attrType": "regular", "types": [ "number" ], "defaultValue": 0, "reactive": true, "description": "Rounds the corners of the clip area when `clipping` is enabled, instead of clipping to a sharp rectangle. Has no effect when `clipping` is `false`. WebGL only.", "usedIn": [ "Element", "Text", "RouterView" ] }, "overflow": { "attrType": "regular", "types": [ "enum" ], "values": [ "true", "false" ], "defaultValue": "true", "reactive": true, "description": "Allows content to extend beyond the element's width and height. Inverse of clipping.", "usedIn": [ "Element", "Text" ] }, "src": { "attrType": "regular", "types": [ "string", { "type": "object", "properties": { "src": { "type": "string" }, "type": { "type": "string", "enum": [ "regular", "svg", "compressed" ] } } } ], "defaultValue": null, "reactive": true, "description": "The image source URL. Can be a string path or an object {src, type} where type is 'regular', 'svg', or 'compressed' (for cases where file type can't be derived from the file name).", "usedIn": [ "Element" ] }, "fit": { "attrType": "regular", "types": [ "enum", { "type": "object", "properties": { "type": { "type": "string", "enum": [ "cover", "contain" ] }, "position": { "type": "number" } } } ], "values": [ "cover", "contain" ], "defaultValue": null, "reactive": true, "description": "Controls how an image is resized to fit the Element's dimensions. Accepts 'cover', 'contain', or an object {type, position} for fine-grained control over clip position.", "usedIn": [ "Element" ] }, "rtt": { "attrType": "regular", "types": [ "enum" ], "values": [ "true", "false" ], "defaultValue": "false", "reactive": true, "description": "Enables render-to-texture mode, rendering the element and its children to an off-screen texture.", "usedIn": [ "Element" ] }, "effects": { "attrType": "regular", "types": [ "array" ], "defaultValue": null, "reactive": true, "description": "Applies one or more shader effects using DynamicShader. Accepts an array of objects, each with a type and optional props (e.g., [{type: 'radius', props: {radius: 20}}]).", "usedIn": [ "Element" ] }, "placement": { "attrType": "regular", "types": [ "enum", { "type": "object", "properties": { "x": { "type": "string", "enum": [ "left", "center", "right" ] }, "y": { "type": "string", "enum": [ "top", "middle", "bottom" ] } } } ], "values": [ "left", "center", "right", "top", "middle", "bottom" ], "defaultValue": null, "reactive": true, "description": "Predefined placement relative to the parent's dimensions. Accepts 'left', 'center', 'right', 'top', 'middle', 'bottom', or an object {x, y} for combined placement.", "usedIn": [ "Element", "Text", "Layout", "RouterView" ] }, "inspector-data": { "attrType": "regular", "types": [ { "type": "object" } ], "defaultValue": null, "reactive": false, "description": "Attaches custom metadata to elements for debugging and automated testing, visible in the Lightning inspector. Only processed in dev mode when inspector is enabled.", "usedIn": [ "Element", "Text", "Layout", "RouterView", "Component" ] }, "content": { "attrType": "regular", "types": [ "string" ], "defaultValue": null, "reactive": true, "description": "The text to be displayed. Can be hardcoded text, a dynamic value, or a reactive value.", "usedIn": [ "Text" ] }, "font": { "attrType": "regular", "types": [ "string" ], "defaultValue": "sans-serif", "reactive": true, "description": "The font family to use for text rendering.", "usedIn": [ "Text" ] }, "size": { "attrType": "regular", "types": [ "number" ], "defaultValue": 32, "reactive": true, "description": "The font size of a Text element in pixels.", "usedIn": [ "Text" ] }, "letterspacing": { "attrType": "regular", "types": [ "number" ], "defaultValue": 0, "reactive": true, "description": "Letter spacing in pixels. Allows any number greater than or equal to zero.", "usedIn": [ "Text" ] }, "align": { "attrType": "regular", "types": [ "enum" ], "values": [ "left", "right", "center" ], "defaultValue": null, "reactive": true, "description": "The alignment of the text. Centering and right alignment require maxwidth to be set.", "usedIn": [ "Text" ] }, "maxwidth": { "attrType": "regular", "types": [ "number" ], "defaultValue": null, "reactive": true, "description": "The maximum length of a line of text in pixels. Words surpassing this length will be wrapped onto the next line.", "usedIn": [ "Text" ] }, "maxlines": { "attrType": "regular", "types": [ "number" ], "defaultValue": null, "reactive": true, "description": "Maximum number of lines that will be displayed.", "usedIn": [ "Text" ] }, "maxheight": { "attrType": "regular", "types": [ "number" ], "defaultValue": null, "reactive": true, "description": "Maximum height of a text block in pixels. Lines exceeding this height will not be displayed.", "usedIn": [ "Text" ] }, "lineheight": { "attrType": "regular", "types": [ "number" ], "defaultValue": null, "reactive": true, "description": "The spacing between lines in pixels.", "usedIn": [ "Text" ] }, "contain": { "attrType": "regular", "types": [ "enum" ], "values": [ "none", "width", "height", "both" ], "defaultValue": "none", "reactive": true, "description": "The strategy for containing text within bounds. Usually set automatically by Blits based on other specified attributes.", "usedIn": [ "Text" ] }, "textoverflow": { "attrType": "regular", "types": [ "string", "enum" ], "values": [ "false" ], "defaultValue": "...", "reactive": true, "description": "The suffix added when text is cropped due to bounds limits. Defaults to '...'. Set to false or empty string for no suffix.", "usedIn": [ "Text" ] }, "wordwrap": { "attrType": "regular", "types": [ "number" ], "defaultValue": null, "reactive": true, "deprecated": true, "description": "Deprecated - use maxwidth instead. Sets the maximum line width in pixels for text wrapping.", "usedIn": [ "Text" ] }, "direction": { "attrType": "regular", "types": [ "enum" ], "values": [ "horizontal", "vertical" ], "defaultValue": "horizontal", "reactive": true, "description": "Controls the direction of layout content arrangement.", "usedIn": [ "Layout" ] }, "gap": { "attrType": "regular", "types": [ "number" ], "defaultValue": 0, "reactive": true, "description": "Controls how much space in pixels is added between each child Element or Component in a Layout.", "usedIn": [ "Layout" ] }, "align-items": { "attrType": "regular", "types": [ "enum" ], "values": [ "start", "center", "end" ], "defaultValue": "start", "reactive": true, "description": "Specifies how to align children on the opposite axis of the Layout direction.", "usedIn": [ "Layout" ] }, "padding": { "attrType": "regular", "types": [ "number", { "type": "object", "properties": { "top": { "type": "number" }, "bottom": { "type": "number" }, "left": { "type": "number" }, "right": { "type": "number" }, "x": { "type": "number" }, "y": { "type": "number" } } } ], "defaultValue": 0, "reactive": true, "description": "Adds spacing between the content and the edges of the Layout. Accepts a number for uniform padding or an object with top/bottom/left/right/x/y keys.", "usedIn": [ "Layout" ] }, "is": { "attrType": "regular", "types": [ "string" ], "defaultValue": null, "reactive": false, "description": "Dynamically instantiates a Component based on a state variable or prop value.", "usedIn": [ "Component" ] }, "ref": { "attrType": "regular", "types": [ "string" ], "defaultValue": null, "reactive": false, "description": "A reference identifier for the Element or Component, accessible via this.select() in the component logic.", "usedIn": [ "Element", "Text", "Layout", "RouterView", "Component" ] }, "for": { "attrType": "directive", "types": [ "string" ], "defaultValue": null, "reactive": true, "description": "Directive for repeating multiple instances of an Element or Component. Uses 'item in $array' or '(item, index) in $array' syntax.", "usedIn": [ "Element", "Text", "Layout", "RouterView", "Component" ] }, "key": { "attrType": "regular", "types": [ "string" ], "defaultValue": null, "reactive": false, "description": "A unique identifier for items in a for-loop, enabling efficient reuse of Element/Component instances when the array changes. Should reference a unique field (e.g., key=\"$item.id\").", "usedIn": [ "Element", "Text", "Layout", "RouterView", "Component" ] }, "range": { "attrType": "regular", "types": [ { "type": "object", "properties": { "from": { "type": "number" }, "to": { "type": "number" } } } ], "defaultValue": null, "reactive": true, "description": "Limits a for-loop to render only a subset of items. Accepts an object {from, to} where 'from' is inclusive and 'to' is exclusive. Items outside the range are destroyed and recreated when they re-enter.", "usedIn": [ "Element", "Text", "Layout", "RouterView", "Component" ] }, "show": { "attrType": "directive", "types": [ "enum" ], "values": [ "true", "false" ], "defaultValue": "true", "reactive": true, "description": "Conditionally shows or hides the Element/Component by setting alpha to 0 or restoring it.", "usedIn": [ "Element", "Text", "Layout", "RouterView", "Component" ] }, "@loaded": { "attrType": "event", "types": [ "string", "function" ], "defaultValue": null, "reactive": false, "description": "Fires when an image or text element loads, providing its dimensions ({w, h}). Accepts a function reference (e.g., $handlerName) or an inline arrow function.", "usedIn": [ "Element", "Text" ] }, "@error": { "attrType": "event", "types": [ "string", "function" ], "defaultValue": null, "reactive": false, "description": "Fires when an image fails to load, passing an error message. Accepts a function reference (e.g., $handlerName) or an inline arrow function.", "usedIn": [ "Element", "Text" ] }, "@updated": { "attrType": "event", "types": [ "string", "function" ], "defaultValue": null, "reactive": false, "description": "Fires after each Layout children update, providing current dimensions ({w, h}). Can fire multiple times.", "usedIn": [ "Layout" ] } }