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}

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}