Skip to main content

Introduction

The heycreo template format is a JSON-based format for defining reusable design templates. Templates allow you to create flexible, customizable designs that can be exported to multiple platforms and formats.

What templates enable:

  • Reusable designs: Create once, use many times with different content
  • Multi-format export: One template can output to Instagram, LinkedIn, Twitter, and more
  • Dynamic content: Users can customize text, images, and other elements through controls
  • Consistent branding: Maintain design consistency across all exports
  • Video support: Create both static images and animated videos from the same template

How it works: Templates define the structure and styling of a design, while controls allow users to input their own content. The platform automatically renders the template with the user's content, ensuring proper layout, text sizing, and formatting across all output formats.

Template Structure​

A template is organized hierarchically: The main template object contains metadata, controls, and an array of sizes. Each size represents one output format (e.g., Instagram Post, LinkedIn Post) and contains elements (text, images, shapes) that make up the design. Sizes can be single-page (elements directly) or multi-page (pages array for carousels), where each page contains its own elements. Controls are defined at the template level and can be connected to elements for dynamic content customization.

The Base Template Object​

The main template object structure:

interface Template {
  id: string;                    // UUID
  name: string;                   // Template name
  description?: string;           // Description
  thumbnail?: string;             // Template-level thumbnail URL (auto-generated)
  
  // Output formats
  sizes: TemplateSize[];          // Array of template sizes
  
  // User input fields
  controls?: Control[];            // Controls for template customization
  
  // Video/Audio
  supportsVideo?: boolean;        // Global permission flag: enables video support for this template
  
  // Colors (palette theming is always on)
  defaultColorPaletteId?: string;  // Default color palette
  
  // Layer Groups (Variations)
  layerGroups?: LayerGroup[];      // Global layer groups
  
  // Exclusive control groups
  exclusiveControlGroups?: ExclusiveGroup[];
  
  // Editor settings
  rulerUnit?: 'px' | 'mm' | 'cm' | 'in';
  showRulers?: boolean;
  guideColor?: string;
}

Template Size​

Template Size is the most important sub-level of a template object. Each size represents one available output format for the template (e.g., Instagram Post, LinkedIn Post, Twitter Header).

Key concepts:

  • One template, multiple formats: A single template can have multiple sizes, allowing you to export the same design to different platforms
  • Independent configurations: Each size has its own elements, dimensions, and settings
  • Format-specific: Each size corresponds to a specific output format (standard preset or custom size)
  • Single-page or Multi-page: A size can have elements directly (single-page) or contain multiple pages (multi-page/carousel)

Read more about Template Sizes →

Elements​

Elements are the building blocks of templates - text, images, shapes, and containers that make up your design. Elements are defined within a Size (or within Pages for multi-page sizes).

Key concepts:

  • Element Types: Text, Image, and Shape elements
  • Position & Size: Each element has position (x, y) and dimensions (width, height)
  • Style: Visual properties like colors, fonts, and effects
  • Control Connections: Elements can be linked to controls for dynamic content
  • Containers: Shape elements can function as containers for other elements

Read more about Elements →

Controls​

Controls are user input fields that allow users to customize templates. Elements can be linked to controls to make them dynamic and customizable.

When an element is linked to a control, users can control that element's behavior through the control. For example, a text element can be linked to a text input control, allowing users to change the headline text. An image element can be linked to an image upload control, letting users replace the image. Controls can also act as visibility controls, enabling users to show or hide elements like optional logos or badges.

The platform supports various control types including text inputs, textareas, checkboxes, dropdown selects, and image uploads, each providing different ways for users to customize template content.

Read more about Controls →

Container Layout​

Containers enable dynamic, adaptive layouts where elements automatically reposition themselves when other elements are shown, hidden, or resized. This eliminates the need to manually recalculate positions when content changes. Shape elements can function as containers using a vertical stack layout system that arranges child elements from top to bottom.

See Layout Engine for details on vertical stack containers.

Video Support​

Templates can support both static images and videos. The video capability is controlled through the supportsVideo flag at different levels:

  1. Template Level: Global permission flag (template.supportsVideo)
  2. Size Level: For single-page sizes (size.supportsVideo)
  3. Page Level: For multi-page sizes (page.supportsVideo)

A template can have both static and video sizes, and in multi-page sizes, different pages can have different video settings.

For details on creating animations and timelines, see Timeline & Animations.

Layer Groups​

Layer Groups are an editor feature for organizing elements in the template editor. They allow you to create variants (e.g., "Variant 1" vs "Variant 2") and filter elements in the layers panel. Elements can be assigned to layer groups to organize them during template creation and editing.

See also​