Skip to content

Create a render (image, PDF, or video)

This is the endpoint to render images, PDFs, and videos on Templated.

It responds with 200 OK and returns the render data including the render URL.
By default, renders are generated synchronously and take around 2 seconds to complete (videos may take longer depending on duration and complexity).

Once generated, the image/PDF/video file is immediately available at the returned URL.

Sample Request

Here’s a sample request to create a render:

ENDPOINT
POST /v1/render;
fetch('https://api.templated.io/v1/render', {
method: 'POST',
body: JSON.stringify(
{
"template" : TEMPLATE_ID,
"layers" : {
"text-1" : {
"text" : "This is my text to be rendered",
"color" : "#FF0000",
"background" : "#0000FF"
},
"image-1": {
"image_url" : "https://picsum.photos/200/300.jpg"
}
}
}
),
headers: {
'Content-Type' : 'application/json',
'Authorization' : `Bearer ${API_KEY}`
}
})

Parameters

template string REQUIRED
The template id that you want to render.

templates array
This is only used for batch rendering from a list of templates.
If it’s provided, the template parameter will be ignored and will not be required.
Example: "templates": ["template-id-1", "template-id-2"]

format string
Render format (jpg, png, webp, pdf, or mp4). Default is jpg.

transparent boolean
Make the background transparent when the render format is png. Default is false.

duration number
Duration of the video in milliseconds when the render format is mp4.
Maximum is 90000 (90 seconds). Default is 5000 (5 seconds).

fps number
Frames per second when the render format is mp4.
Minimum is 1. Maximum is 60. Default is 30.

flatten boolean
Flatten the PDF when the render format is pdf.
This is recommended for print-ready documents. Default is false.

cmyk boolean
Use CMYK color mode when the render format is pdf.
This is recommended for print-ready documents. Default is false.

name string
A custom name for the render.

background string
Background color in hex format e.g. “#FF0000”.

width number
A custom width for the render in pixels (minimum 100, maximum 5000).

height number
A custom height for the render in pixels (minimum 100, maximum 5000).

scale number
Scale factor to resize the final render (minimum 0.1, maximum 2.0).
For example, 0.5 will render at 50% size, 2.0 will render at 200% size. Default is 1.0.

async boolean
If set to false, the render will be created synchronously. Default is false.

webhook_url string
A url to POST the full Render object to upon rendering completed.

merge boolean
When set to true and multiple renders are generated (multi-page templates), automatically merge all renders into a single PDF. Default is false.

pages array
For multi-page templates, use this to specify different layer modifications for each page.
Each object in the array should have a page (page identifier) and layers (layer modifications for that page).
When using pages, the layers parameter is ignored.

layers object
An object of layers that will be updated in the template.
The object key is the layer name and the value is an object with the layer properties to override.
Use this for single-page templates or to apply the same changes to all pages in multi-page templates.

Layer Parameters

These are the parameters that can be used to override the template layers attributes.

text string
Replacement text you want to use.
If the layer is a QR Code or a Barcode this will be the value used.

image_url string
Replacement image src for an image layer.

color string
Color in hex format e.g. “#FF0000”.

color_2 string
Secondary color in hex format. It will be applied to text surrounded by * in the text layer.

background string
Background color in hex format e.g. “#FF0000”.

font_family string
Change the font family.

font_family_2 string
Secondary font family. It will be applied to text surrounded by * in the text layer.

font_size string
Change the font size. Use a CSS value like (“24px” or “12pt”)

font_weight string
Change the font weight (normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900).

letter_spacing string
Change the letter spacing of the text. Accepts CSS values like “2.5px”, “0.5em”, or “-1px”. Can be negative.

line_height string
Change the line height of the text. Accepts CSS values like “1.5” (unitless multiplier), “24px”, or “2em”.

text_stroke_width double
Width of the text stroke (outline) in pixels. Use this to add an outline to your text.

text_stroke_color string
Color of the text stroke (outline) in hex format e.g. “#000000”.

text_highlight_color string
Background color of the text highlight in hex format e.g. “#FFFF00”.
Only applies to text layers that have text highlight enabled.

padding_x integer
Horizontal padding in pixels.

padding_y integer
Vertical padding in pixels.

horizontal_align string
Change the horizontal alignment of the text (left, center, right).

vertical_align string
Change the vertical alignment of the text (top, center, bottom).

autofit string
Set to “width” or “height” to automatically fit the layer to the width or height of the box defined in the Editor.

border_width integer
Width of the object border.

border_color string
Border color in hex format e.g. “#FF0000”.

border_radius string
Border radius in px or percentage (e.g. “10px” or “10%”).

border_style string
Border style for shapes and lines (solid, dashed, dotted). Default is “solid”.

dash_length double
Custom dash/dot length for dashed or dotted border styles. If not provided, defaults are calculated based on stroke width.

dash_gap double
Custom gap length between dashes or dots for dashed or dotted border styles. If not provided, defaults are calculated based on stroke width.

fill string
Fill color for shapes and uploaded SVG components.
Supports hex colors (e.g. “#FF0000”) and CSS linear gradients (e.g. “linear-gradient(90deg, #FF0000 0%, #0000FF 100%)”).

stroke string
Stroke (border) color for shapes and uploaded SVG components in hex format e.g. “#FF0000”.

hide boolean
Set to true to hide the layer.

opacity double
Set the opacity of the layer. Value should be between 0 (fully transparent) and 1 (fully visible).

link string
Add a link to the layer. It must start with http:// or https://.
Links will only work on PDF renders.

x integer
Horizontal position of the layer (top left corner).

y integer
Vertical position of the layer (top left corner).

rotation integer
Rotation of the layer in degrees.

width integer
Width of the layer.

height integer
Height of the layer.

object_fit string
Change the object fit of an image (cover, contain, fill, none).

filter string
Change the filter of an image layer.
Example: "blur(4px) brightness(68%) hue-rotate(27deg) contrast(70%) saturate(125%) sepia(53%) grayscale(27%) invert(25%)"

barcode_format string
The format of the barcode.
Supported formats: CODE128, CODE39, EAN13, EAN8, ITF14, UPC.

rating double
The rating of the star rating layer.

html string
Set the layer content to a custom HTML content.
Value example: "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>"

Response

The API returns a JSON object with the render details.

{
"id": "ce424057-6b54-41bb-afec-adc35a2b9175",
"url": "https://templated-assets.s3.amazonaws.com/renders/ce424057-6b54-41bb-afec-adc35a2b9175.jpg",
"width": 1920,
"height": 1080,
"format": "jpg",
"templateId": "1f1231-dasd123-fsdf12312-fds4123-asdas23",
"templateName": "Sample Template",
"createdAt": "2025-04-22 08:30:58"
}

Multi-Page Template

If you are using a multi-page template, you can use the pages parameter to specify different layer modifications for each page.
Multi-page templates are ideal for creating carousels or PDF documents with multiple pages.

Same Content Across All Pages

Similarly to the single-page template, you can use the layers parameter to apply the same modifications to all pages:

fetch('https://api.templated.io/v1/render', {
method: 'POST',
body: JSON.stringify({
"template": TEMPLATE_ID,
"layers": {
"company_name": { "text": "ACME Corporation" },
"logo": { "image_url": "https://example.com/logo.png" }
}
}),
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${API_KEY}`
}
})

Different Content Per Page

Use the pages parameter to specify different layer modifications for each page.
You can even duplicate the same page multiple times to create a carousel.

fetch('https://api.templated.io/v1/render', {
method: 'POST',
body: JSON.stringify({
"template": TEMPLATE_ID,
"pages": [
{
"page": "page-1",
"layers": {
"title": { "text": "Welcome to Our Company" },
"subtitle": { "text": "Page 1 Content" }
}
},
{
"page": "page-2",
"layers": {
"title": { "text": "Our Services" },
"content": { "text": "We offer amazing services..." }
}
},
{
"page": "page-3",
"layers": {
"title": { "text": "Contact Us" },
"contact": { "text": "support@company.com" }
}
}
]
}),
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${API_KEY}`
}
})

Response for Multi-Page Templates

When multiple pages are rendered (using pages parameter or multi-page templates with layers), you will receive an array of render objects in the response:

[
{
"id": "render-page1-id",
"url": "https://templated-assets.s3.amazonaws.com/renders/render-page1-id.jpg",
"page": "page-1",
"width": 1920,
"height": 1080,
"format": "jpg",
"templateId": "template-id",
"templateName": "Multi-Page Template",
"createdAt": "2025-04-22 08:30:58"
},
{
"id": "render-page2-id",
"url": "https://templated-assets.s3.amazonaws.com/renders/render-page2-id.jpg",
"page": "page-2",
"width": 1920,
"height": 1080,
"format": "jpg",
"templateId": "template-id",
"templateName": "Multi-Page Template",
"createdAt": "2025-04-22 08:30:58"
}
]

Video Rendering

Templated supports rendering templates as MP4 videos. This is ideal for templates with animations, video layers, or when you want to create dynamic video content from your designs.

Video Parameters

When rendering videos, you can control the following parameters:

ParameterTypeDescriptionDefault
formatstringSet to "mp4" for video output"jpg"
durationnumberVideo duration in milliseconds (max 90000)5000
fpsnumberFrames per second (10, 30, or 60)30

Sample Video Request

fetch('https://api.templated.io/v1/render', {
method: 'POST',
body: JSON.stringify({
"template": TEMPLATE_ID,
"format": "mp4",
"duration": 10000, // 10 seconds
"fps": 30,
"layers": {
"title": { "text": "Welcome to my video!" },
"background-video": { "video_url": "https://example.com/video.mp4" }
}
}),
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${API_KEY}`
}
})

Video Credits Cost

Video rendering uses a credit system based on the template size, duration, and FPS.
The formula is:

Width × Height × FPS × Duration in seconds
50,000,000

Example: A 1920×1080 video at 30 FPS for 10 seconds would cost:

  • (1920 × 1080 × 30 × 10) / 50,000,000 = 12.4 credits (rounded up to 13 credits)

Video Credit Usage Calculator

Use this calculator to estimate the number of credits required for a video render.

Estimated Cost
13 credits
(1920 × 1080 × 30 × 10) / 50M
= 6.22 → rounded up

Limitations

Best Practices for Video Rendering

  1. Start with shorter durations - Test with 5-10 second videos before creating longer content
  2. Use appropriate FPS - 30 FPS is suitable for most content; use 60 FPS only for smooth motion graphics
  3. Optimize template animations - Ensure your animations are designed to loop or complete within the specified duration
  4. Consider async rendering - For longer videos, set "async": true and use webhooks to be notified when rendering completes