Zum Hauptinhalt springen

Elements

Elements are the building blocks of templates. They represent the visual components that make up your design: text, images, shapes, and containers.

Overview​

Elements are defined within a Size (or within Pages for multi-page sizes). Each element has:

  • Type: What kind of element it is (text, image, shape)
  • Position & Size: Where it's placed and how big it is
  • Style: Visual appearance (colors, fonts, effects)
  • Control Connections: Links to controls for dynamic content
  • Container Properties: Optional container or child layout properties

Element Types​

Text Element​

Text elements display text content that can be customized through controls.

{
  id: string;                      // UUID
  type: "text";
  content: string;                 // Default text
  text?: string;                  // Current text (after control processing)
  name: string;                    // Element name (e.g., "headline")
  displayName?: string;           // Display name
  
  // Position & Size
  x: number;                       // X position (left)
  y: number;                       // Y position (top)
  width: number;                   // Width
  height: number;                  // Height
  rotation?: number;               // Rotation in degrees
  
  // Control connections
  valueControlId?: string;        // Control ID for text content
  visibilityControlId?: string;   // Control ID for visibility
  visibilityControlValue?: boolean; // Visible when control = true/false
  
  // Container properties
  parentContainerId?: string;     // Parent container ID
  childLayout?: ChildLayout;      // Margin/padding as child
  
  // Layer group
  layerGroupId?: string;          // Layer group (for variations)
  
  // Style
  style: {
    fontSize: number;              // Font size
    fontFamily: string;            // Font family
    fontWeight: string | number;   // Font weight ("400", "700", etc.)
    fontStyle?: "normal" | "italic";
    color: string;                 // Text color (hex or "token:primary")
    textAlign?: "left" | "center" | "right";
    lineHeight?: number;           // Line height (e.g., 1.2)
    maxLines?: number | null;      // Max lines (for auto-resize)
    autoResize?: boolean;          // Auto-resize enabled (default: true)
    
    // Text effects
    textShadow?: {
      enabled: boolean;
      offsetX: number;
      offsetY: number;
      blur: number;
      color: string;
    };
    textDecoration?: "none" | "underline";
  };
}

Image Element​

Image elements display images that can be replaced through controls.

{
  id: string;
  type: "image";
  content: string;                 // Image URL
  videoContent?: string;          // Video URL (if supportsVideo: true)
  name: string;
  
  // Position & Size
  x: number;
  y: number;
  width: number;
  height: number;
  rotation?: number;
  
  // Control connections
  valueControlId?: string;        // Control ID for image selection
  visibilityControlId?: string;
  
  // Video support
  supportsVideo?: boolean;        // Can be rendered as video?
  
  // Style
  style: {
    borderRadius?: number;        // Rounded corners
    opacity?: number;             // Transparency (0-1)
    objectFit?: "cover" | "contain" | "fill";
    
    // SVG-specific
    fillColor?: string;
    enableFill?: boolean;
  };
}

Shape Element​

Shape elements create geometric shapes and can also function as containers.

{
  id: string;
  type: "shape";
  content: "square" | "circle" | "rectangle" | "triangle" | "arrow" | "line";
  name: string;
  
  // Position & Size
  x: number;
  y: number;
  width: number;
  height: number;
  rotation?: number;
  
  // Container properties
  isVerticalStackContainer?: boolean; // Is container?
  containerLayout?: ContainerLayout;  // Container layout
  
  // Style
  style: {
    backgroundColor: string;       // Background color
    borderRadius?: number;        // Rounded corners
    borderColor?: string;         // Border color
    borderWidth?: number;          // Border width
    opacity?: number;
    
    // Gradient
    gradient?: {
      enabled: boolean;
      type: "linear" | "radial";
      angle?: number;              // For linear (0-360°)
      stops: Array<{
        color: string;
        position: number;          // 0-100%
      }>;
    };
    
    // Shadow
    dropShadow?: {
      enabled: boolean;
      offsetX: number;
      offsetY: number;
      blur: number;
      color: string;
    };
  };
}

Common Properties​

All elements share these common properties:

Position & Size​

  • x, y: Position on the canvas (top-left corner)
  • width, height: Dimensions in pixels
  • rotation: Rotation angle in degrees (optional)

Control Connections​

  • valueControlId: Links to a control that changes the element's content
  • visibilityControlId: Links to a control that shows/hides the element
  • visibilityControlValue: The value that makes the element visible

Container Properties​

  • parentContainerId: ID of the container this element belongs to
  • childLayout: Margins when this element is a child of a container
  • isVerticalStackContainer: Whether this shape element is a container
  • containerLayout: Container layout settings (if it's a container)

Layer Groups​

  • layerGroupId: Assigns element to a layer group for variations

See also​