Create a template

This endpoint is used for more complex integrations where you need to create templates programmatically.
It allows you to create a new template by composing multiple layers into a single design.
Each layer can be text, images, or shapes, with specific positioning, dimensions, and styling properties.

This endpoint allows you to:

• Build complex designs by stacking multiple layers
• Position elements precisely using x and y coordinates
• Style text with custom fonts, colors, and auto-fitting options
• Add images with specific dimensions and positioning
• Create shapes using SVG markup for backgrounds, overlays, or decorative elements
• Control the visual hierarchy through layer ordering

After creating the template, you can open and modify the template in our Editor or use it to generate renders with the render endpoint.

name string REQUIRED
The name of the template.

width number REQUIRED
The width of the template in pixels (max 5000).

height number REQUIRED
The height of the template in pixels (max 5000).

layers array REQUIRED
An array of layer objects that make up the template.
On each layer you must specify the layer property, which will be the name identifier of the layer in the template and the layer type (image, text, shape).

duration number
Default video duration in milliseconds for MP4 renders (e.g., 5000 for 5 seconds). When rendering a video without specifying a duration, this value is used as the default.

For all the available layer properties, see the Layer Parameters section.

You can group layers together by setting the same group property on multiple layers. Grouped layers are treated as a single unit in the Editor and can be identified programmatically via the API.

group string
An optional group name. Layers that share the same group value will be wrapped in a group container. The group’s position and dimensions are automatically calculated from the bounding box of its child layers.

{
  "layers": [
    {
      "layer": "title",
      "type": "text",
      "group": "header",
      "text": "Hello World",
      "x": 100,
      "y": 100,
      "width": 400,
      "height": 90
    },
    {
      "layer": "logo",
      "type": "image",
      "group": "header",
      "image_url": "https://example.com/logo.png",
      "x": 100,
      "y": 220,
      "width": 200,
      "height": 200
    },
    {
      "layer": "footer",
      "type": "text",
      "text": "This layer is not grouped",
      "x": 100,
      "y": 900,
      "width": 500,
      "height": 50
    }
  ]
}

In this example, title and logo are grouped under "header", while footer remains independent.

Here’s a sample request to create a template:

POST /v1/template

fetch('https://api.templated.io/v1/template', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${API_KEY}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    "name": "Summer Music Festival Post",
    "width": 1200,
    "height": 630,
    "layers": [
      {
        "layer": "background-image",
        "type": "image",
        "width": 1200,
        "height": 630,
        "x": 0,
        "y": 0,
        "image_url": "https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3"
      },
      {
        "layer": "event-name",
        "type": "text",
        "width": 1000,
        "height": 120,
        "x": 100,
        "y": 80,
        "text": "SUMMER BEATS\nFESTIVAL 2024",
        "color": "#ffffff",
        "font_family": "ArchivoBlack-Regularttf",
        "font_size": "72px",
        "autofit": "height"
      },
      {
        "layer": "details-box",
        "type": "shape",
        "width": 800,
        "height": 180,
        "x": 330,
        "y": 240,
        "html": "<rect width='100%' height='100%' rx='12' fill='#4B56D2' opacity='0.85'/>"
      }
    ]
  })
})