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:
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'/>" } ] })})