Element types determine hierarchy rules, Design/Logic controls, Preview behavior, and generated output. The user-facing hierarchy includes placeable content nodes plus structural nodes managed by the Component model.
Type: Element · Purpose: general container/layout region · Main current boundary: generated semantic role is not inferred automatically
Type: Text · Purpose: styled text container · Main current boundary: can contain bindable String runs
Type: String · Purpose: independently bindable text run · Main current boundary: belongs within compatible text/content structure
Type: Link · Purpose: real exported link · Main current boundary: use for crawler/assistive link graph; not just navigation logic
Type: Input · Purpose: user-editable form control · Main current boundary: configure and focus before typing in Preview
Type: Image · Purpose: design-system image/SVG token instance · Main current boundary: referenced token/blob must resolve
Type: SVG · Purpose: vector container · Main current boundary: owns compatible Path geometry
Type: Path · Purpose: editable vector path · Main current boundary: parent and point/boolean operations are specialized
Type: IFrame · Purpose: embedded external content · Main current boundary: external URL/security policy controls runtime result
Type: Mesh Gradient · Purpose: editable mesh effect · Main current boundary: specialized points and animation capture
Type: Shader · Purpose: shader visual effect · Main current boundary: keyframes Preview, but exported animation is currently static
Type: Component · Purpose: instance of visual or Code Component · Main current boundary: internal source tree stays owned by source file
Type: Document · Purpose: embedded rich Document · Main current boundary: compatible Document identity required
Type: Connection · Purpose: link to another screen · Main current boundary: carries route/screen parameter or overlay configuration
Type: Children · Purpose: named slot supplied by caller · Main current boundary: declared through Component data structure
The canvas Draw menu directly offers Element, Image, Text, Svg, Path, Circle, and Square. Circle/Square create ready-made Path shapes. Other types come from selection-sensitive or specialized actions.
Root, Screen List, Screen, and Body define the visual file structure. Style nodes hold layered styles. Timeline/Timeline Player, API/View loaders, Storage mounters, validators, listeners, events, test cases, typed data declarations/values, content data, and Code nodes represent non-visual Component behavior.
These nodes can appear in raw data or specialized UI sections but are not all arbitrary canvas children. Use the corresponding data-structure, Logic, timeline, or file workflow.
The historical numeric FRAME type is retired. Its ID remains reserved so old persisted rows are never reinterpreted as another type; current code does not render or export those old Frame rows.
parent/child compatibility is validated on add and move;
one Screen List's screens share the same Body/element tree;
Mockups hang visual elements directly under their root;
tree order affects layout, reading order, and generated JSX;
Lock prevents normal canvas targeting but does not remove runtime output;
Hide affects editor canvas visibility, not runtime rendering;
responsive Skip removes an element for a screen;
Logic conditions decide runtime rendering.
Use add-tree for a planned nested subtree and specific add-* operations for individual types. Structure reads/search, move/duplicate/delete, type-specific setters, style, logic, and Preview tools complete the lifecycle. Use IDs from current reads.