Skip to content

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.

Parameters

name string REQUIRED
The name of the template.

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

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

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).

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

Sample Request

Here’s a sample request to create a template:

ENDPOINT
POST /v1/template
REQUEST
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'/>"
}
]
})
})