Documentation

1. Clone a Starter Template

Or build a template from scratch

2. Create an API Key

Go to App → API Keys → Create New Key to generate your authentication token

3. Generate via API (Authenticated)

Use layer overrides to dynamically customize your template:

const response = await fetch('https://yourdomain.com/api/generate', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    templateId: 'your-template-id',
    layers: {
      title: { text: 'My Blog Post Title' },
      subtitle: {
        text: 'Published on Jan 15',
        fontSize: 24,
        color: '#666666'
      },
      logo: {
        image_url: 'https://example.com/logo.png',
        width: 120,
        height: 120
      }
    },
    format: 'png',  // 'png' (default), 'jpeg', or 'webp'
    quality: 80     // 1-100 for jpeg/webp; ignored for png
  })
});

const { success, imageUrl, cached, warnings } = await response.json();
// warnings (optional) lists any image that failed to load or an
// unresolved asset reference — the render still returns 200.
// Use imageUrl in your application

The public /api/render endpoint always returns PNG; use /api/generate with format for JPEG or WebP output.

3a. Layer Override Reference

Each override targets a layer by its name and must match the shape for that layer's type. Any subset of fields works — override just fontSize without text, or just objectFit without image_url. The full typed schemas (TextLayerOverrides, ImageLayerOverrides, ShapeLayerOverrides) are in the API Reference.

Text layers   text, fontSize, fontWeight, fontStyle, fontFamily, color,
              textAlign, verticalAlign, lineHeight, letterSpacing,
              textTransform, textDecoration, backgroundColor,
              borderRadius, width, height, rotation

Image layers  image_url, objectFit, objectPosition, borderRadius,
              border, opacity, width, height, rotation

Shape layers  fill, opacity, borderWidth, borderColor, borderStyle,
              borderRadius, width, height, rotation

3b. Use your own images (asset references)

Upload an image, then reference it in any image_url override (or a template layer's src) with its asset:<id> reference. The renderer resolves it from your account server-side, so you never need a public URL. You can also pass a base64 data:image/* URI directly. Prefer a UI? Manage your uploads and copy references under App → Assets.

# 1. Upload a file (multipart). 'name' is optional.
curl -X POST https://yourdomain.com/api/uploads \
  -H 'Authorization: Bearer YOUR_API_KEY' \
  -F '[email protected]' \
  -F 'name=hero shot'
# → 201 { "id": "...", "name": "hero shot", "reference": "asset:...", ... }

# 2. List your uploads to find their ids / references later
curl https://yourdomain.com/api/uploads \
  -H 'Authorization: Bearer YOUR_API_KEY'
# → { "uploads": [{ "id": "...", "name": "hero shot", "reference": "asset:..." }], "total": 1 }

# 3. Reference it when generating (works in image_url overrides and layer src)
{
  "templateId": "your-template-id",
  "layers": {
    "photo": { "image_url": "asset:PASTE_UPLOAD_ID" }
  }
}

3c. TypeScript SDK (@renderfast/client)

Prefer a typed client over raw fetch? The official SDK wraps every endpoint and returns a { data, error } result — no manual URL building or response parsing.

npm install @renderfast/client

import { createClient, postApiGenerate } from '@renderfast/client';

const client = createClient({
  baseUrl: 'https://yourdomain.com',
  headers: {
    Authorization: 'Bearer ' + process.env.RENDERFAST_API_KEY
  }
});

const { data, error } = await postApiGenerate({
  client,
  body: {
    templateId: 'your-template-id',
    layers: {
      title: { text: 'My Blog Post Title' },
      subtitle: { text: 'Published on Jan 15', fontSize: 24, color: '#666666' }
    }
  }
});

if (error) throw error;
console.log(data.imageUrl); // { success, imageUrl, cached, generationTimeMs }

The same generated functions cover the rest of the API — getApiTemplates, postApiTemplatesByIdClone, getApiUploads, and more. Each takes { client, body?, path?, query? } and returns { data, error }.

4. Generate via URL (Public, No Auth)

For public templates, generate images directly via URL with JSON-encoded layer data:

# Simple text override
/api/render?templateId=uuid&layers={"title":{"text":"Hello World"}}

# Multiple layer overrides
/api/render?templateId=uuid&layers={"title":{"text":"Blog Title"},"subtitle":{"text":"By John Doe"},"logo":{"image_url":"https://example.com/avatar.jpg"}}

# Use in HTML
<meta property="og:image" content="https://yourdomain.com/api/render?templateId=..." />

Note: The public endpoint doesn't require authentication and doesn't count toward rate limits. Perfect for social media OG images!

5. Edit Templates Programmatically (Optional)

Update existing templates via API for programmatic template management, bulk updates, or CI/CD integration:

const response = await fetch('https://yourdomain.com/api/templates/your-template-id', {
  method: 'PUT',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Updated Template Name',
    description: 'Updated description',
    jsonData: {
      canvas: { width: 1200, height: 630, background: '#ffffff' },
      layers: [
        // Your updated layer definitions
      ],
      variables: []
    }
  })
});

const updatedTemplate = await response.json();

Updatable fields: name, description, jsonData, previewUrl

Layer Naming (Critical Concept)

Layer Types & Overrides

{
  "title": {
    "text": "New content",
    "fontSize": 48,
    "fontWeight": "bold",
    "color": "#000000",
    "textAlign": "center",
    "lineHeight": 1.2,
    "letterSpacing": -1,
    "textTransform": "uppercase"
  }
}

{
  "avatar": {
    "image_url": "https://example.com/avatar.jpg",
    "width": 120,
    "height": 120,
    "objectFit": "cover",
    "borderRadius": 60,
    "opacity": 1
  }
}

Canvas Setup

Typography Guidelines

Testing Your Template

• • Use the preview panel in the editor with sample data
• • Test with realistic content (long titles, short titles, edge cases)
• • Try different layer override combinations
• • Check rendering at actual size (not zoomed)