Introduction

Welcome to Templify Docs

Templify is a developer-first platform for programmatically generating images. Create dynamic templates using our drag-and-drop editor and populate them with data via our REST API.

Quick Start

Generate your first image

The fastest way to get started is by using a curl command to generate an image from a template you've created.

1curl -X POST /api/v1/generate 
2

3  -H "Authorization: Bearer tf_your_api_key_here" 
4

5  -H "Content-Type: application/json" 
6

7  -d '{'
8    "templateId": "tmpl_123456",
9    "data": {
10      "title": "Hello World",
11      "hero_image": "https://placehold.co/600x400"
12    }
13  }'
Integrations

Client Integrations

You can easily integrate Templify into your web applications. Below are examples for HTML/Vanilla JS and React.

HTML / Vanilla JS

1<!-- index.html -->
2<button id="generateBtn">Generate Image</button>
3<img id="resultImage" style="display: none; max-width: 100%; margin-top: 20px;" />
4

5<script>
6  document.getElementById('generateBtn').addEventListener('click', async () => {
7    try {
8      const response = await fetch('/api/v1/generate', {
9        method: 'POST',
10        headers: {
11          'Authorization': 'Bearer tf_your_api_key_here',
12          'Content-Type': 'application/json'
13        },
14        body: JSON.stringify({
15          templateId: 'tmpl_123456',
16          data: {
17            'title': 'My Dynamic Title',
18            'product_image': 'https://placehold.co/600x400' // Use a Public URL or Base64 Data URI
19          }
20        })
21      });
22

23      const result = await response.json();
24      if (result.url) {
25        const img = document.getElementById('resultImage');
26        img.src = result.url;
27        img.style.display = 'block';
28      }
29    } catch (error) {
30      console.error('Error:', error);
31    }
32  });
33</script>

React

1import { useState } from 'react';
2

3export default function ImageGenerator() {
4  const [imageUrl, setImageUrl] = useState<string | null>(null);
5  const [loading, setLoading] = useState(false);
6

7  const generateImage = async () => {
8    setLoading(true);
9    try {
10      const response = await fetch('/api/v1/generate', {
11        method: 'POST',
12        headers: {
13          'Authorization': 'Bearer tf_your_api_key_here',
14          'Content-Type': 'application/json'
15        },
16        body: JSON.stringify({
17          templateId: 'tmpl_123456',
18          data: {
19            title: 'React Generated',
20            avatar: 'https://placehold.co/150' // Use a Public URL or Base64 Data URI
21          }
22        })
23      });
24

25      const result = await response.json();
26      setImageUrl(result.url);
27    } catch (error) {
28      console.error('Failed to generate:', error);
29    } finally {
30      setLoading(false);
31    }
32  };
33

34  return (
35    <div>
36      <button onClick={generateImage} disabled={loading}>
37        {loading ? 'Generating...' : 'Generate Image'}
38      </button>
39      {imageUrl && <img src={imageUrl} alt="Generated" />}
40    </div>
41  );
42}

Authentication

Templify uses API keys to authenticate requests. You can view and manage your API keys in the API Keys section of your dashboard.

Authorization Header

All API requests must include your API key in the Authorization HTTP header:

Authorization: Bearer tf_your_api_key
Template Structure

The Template Object

A template consists of a base image and a set of dynamic elements (layers).

example_template.json
1{
2  "id": "tmpl_892301",
3  "name": "Social Media Post",
4  "baseImage": "https://...",
5  "elements": [
6    {
7      "id": "layer_1",
8      "type": "text",
9      "formConfig": {
10        "label": "Headline",
11        "placeholder": "Enter headline..."
12      }
13    }
14  ]
15}
API Reference

List Templates

GET/api/v1/templates

Retrieves a list of all templates owned by the authenticated user.

Response Example

1[
2  {
3    "id": "tmpl_123",
4    "name": "Newsletter Header",
5    "visibility": "public",
6    "updatedAt": "2024-01-01T12:00:00Z"
7  }
8]

Generate Image

POST/api/v1/generate

Generates a new image based on a template and provided data.

Request Body

FieldTypeDescription
templateIdstringThe ID of the template to use.
dataobjectKey-value pairs mapping element IDs to content.
qualitystringOptional. original, hd, or 4k.

Response Example

1{
2  "status": "success",
3  "url": "https://res.cloudinary.com/...",
4  "meta": {
5    "width": 1080,
6    "height": 1080,
7    "format": "png",
8    "size": 145023
9  }
10}

Generate Image (GET)

GET/api/v1/generate

Generates a new image and returns the image file directly (not JSON). Useful for embedding in <img> tags.

Query Parameters

ParameterRequiredDescription
templateIdYesThe ID of the template.
apiKeyOptionalYour API key (can also be sent in Authorization header).
formatNopng, jpeg, or pdf. Defaults to png.
...dataNoAny other parameters will be treated as data for the template elements.

Example

1curl "/api/v1/generate?templateId=tmpl_123&title=Hello%20World&hero_image=https://example.com/img.png" \
2  -H "Authorization: Bearer tf_your_api_key" \
3  --output result.png

HTML Example

1<img src="/api/v1/generate?templateId=tmpl_123&title=Dynamic%20Title&apiKey=tf_your_api_key" alt="Generated Image" />

Upload Asset

POST/api/v1/upload

Uploads an image file to the storage and returns a public URL. Maximum file size allowed is 10MB.

Request Body (Multipart)

FieldTypeDescription
fileFileThe image file to upload (JPEG, PNG, WebP, etc.).
resourceTypestringOptional. 'image', 'video', 'raw', or 'auto'. Defaults to 'auto'.

Example

1curl -X POST /api/v1/upload \
2  -H "Authorization: Bearer tf_your_api_key" \
3  -F "file=@/path/to/your/image.png"

Response Example

1{
2  "status": "success",
3  "url": "https://res.cloudinary.com/..."
4}

Bulk Export

POST/api/v1/bulk-export

Process a CSV file to generate multiple images at once. Returns a URL to a ZIP archive containing all generated files. Row headers should match element labels or IDs.

Request Body (Multipart)

FieldTypeDescription
templateIdstringID of the template to use.
dataArray of id stringsArray of data rows to be used in the template.
formatstringOptional. 'png', 'jpeg', or 'pdf'. Defaults to 'png'.
filenameTemplatestringOptional. Pattern for filenames, e.g. "ticket-{{ name }}". Supports column names in braces.

Example

1curl -X POST /api/v1/bulk-export \
2  -H "Authorization: Bearer tf_your_api_key" \
3  -F "templateId=tmpl_123" \
4  -F "data=[{"id_label": "value"}, {"id_label": "value"}]"

Response Example

1{
2  "status": "success",
3  "url": "https://res.cloudinary.com/.../bulk_export.zip",
4  "count": 50
5}