Skip to main content

Template Sizes

Template sizes define the output dimensions and format for your templates. heycreo provides standard sizes for common platforms and allows organizations to create custom sizes.

Overview​

Each template can have multiple sizes, allowing you to create one template that works for different platforms and use cases. For example, a single template might have sizes for Instagram Post, LinkedIn Post, and Twitter Post.

Key concepts:

  • Size ID: Unique identifier for the size (standard preset ID or UUID for custom sizes)
  • Dimensions: Width and height in pixels
  • Safe Areas: Margins where important content should stay within
  • Multi-size templates: One template can have multiple sizes

The Size Object​

The structure of a template size:

interface TemplateSize {
  id: string;                     // Format ID (e.g., "instagram-post") or UUID for custom sizes
  width: number;                   // Width in pixels
  height: number;                  // Height in pixels
  isDefault?: boolean;            // Default size?
  thumbnail?: string;             // Size-specific thumbnail URL (auto-generated)
  
  // Elements for this size
  elements: TemplateElement[];     // Array of elements (for single-page sizes)
  
  // Video support (single-page mode)
  supportsVideo?: boolean;         // Enable video for this size (only in single-page mode)
  duration?: number;               // Duration in milliseconds for this size
  
  // Multi-page support (Pages belong to this Size)
  isMultiPage?: boolean;           // Is this a multi-page size (carousel)?
  pages?: TemplatePage[];          // Array of pages within this size (for multi-page sizes)
  
  // Layer Groups (size-specific)
  layerGroups?: LayerGroup[];
  
  // Guides (helper lines)
  guides?: {
    vertical: number[];            // Vertical guides (X positions)
    horizontal: number[];          // Horizontal guides (Y positions)
  };
}

Pages (Within a Size)​

For multi-page sizes, each page has its own structure:

interface TemplatePage {
  elements: TemplateElement[];     // Elements for this page
  supportsVideo?: boolean;         // Enable video for this specific page
  duration?: number;                // Duration in milliseconds for this page
}

For standard format presets and custom sizes, see Formats & Sizes.

Using Formats in Templates​

To use a format (standard or custom) in a template, reference it by its Size ID. For standard formats, use the predefined ID (e.g., "instagram-post"). For custom sizes, use the UUID.

Standard Formats​

{
  "sizes": [
    {
      "id": "instagram-post",
      "width": 1080,
      "height": 1350,
      "elements": [...]
    }
  ]
}

The platform automatically recognizes standard format IDs and applies the correct dimensions and safe areas.

Custom Sizes​

When using a custom size in a template, reference it by its UUID:

{
  "sizes": [
    {
      "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",  // UUID of custom format preset
      "width": 640,
      "height": 380,
      "elements": [...]
    }
  ]
}

Safe Areas​

Safe areas define margins where important content should stay within to avoid being cut off on different devices or platforms.

{
  safeAreaTop: 250,      // Top margin in pixels
  safeAreaBottom: 250,  // Bottom margin in pixels
  safeAreaLeft: 50,     // Left margin in pixels
  safeAreaRight: 50     // Right margin in pixels
}

Why safe areas matter:

  • Stories/Reels: Have safe areas to avoid UI elements (profile picture, buttons)
  • Print formats: May have bleed areas that get trimmed
  • Responsive displays: Ensure content is visible on all screen sizes

Multi-Size Templates​

A single template can have multiple sizes, allowing you to:

  • Reuse designs: Create once, export to multiple platforms
  • Maintain consistency: Same design across different formats
  • Save time: No need to recreate designs for each platform
{
  "sizes": [
    {
      "id": "instagram-post",
      "width": 1080,
      "height": 1350,
      "elements": [...]
    },
    {
      "id": "linkedin-post",
      "width": 1200,
      "height": 627,
      "elements": [...]
    },
    {
      "id": "twitter-post",
      "width": 1200,
      "height": 675,
      "elements": [...]
    }
  ]
}

See also​