How do I use dynamic elements in API calls?

Dynamic elements let you change any part of your design via API.

How It Works

1. In the editor, name your layers (e.g., product_title, user_avatar)
2. In your API call, reference those names in dynamicElements
3. The API replaces the content and generates your image

Basic Example

Design has a text layer named "greeting":

json
{
  "designId": "abc123",
  "dynamicElements": {
    "greeting": {
      "text": "Hello, Sarah!"
    }
  }
}

Changing Multiple Properties

You can change more than just content:

json
{
  "dynamicElements": {
    "main_title": {
      "text": "Summer Sale",
      "fill": "#FF5733",
      "fontSize": 72
    },
    "product_image": {
      "src": "https://example.com/product.jpg"
    },
    "price_tag": {
      "text": "$29.99",
      "fill": "#00AA00"
    }
  }
}

Available Properties

For Text Elements:

• text - The text content
• fill - Text color (hex)
• fontSize - Size in pixels
• fontFamily - Font name
• fontWeight - bold, normal, etc.

For Image Elements:

• src - Image URL
• opacity - 0 to 1

For All Elements:

• x, y - Position
• width, height - Size
• rotation - Degrees
• visible - true/false

Finding Element Names

1. Open your design in the editor
2. Click on any element
3. Look for "Layer Name" in the right panel
4. Use that exact name in your API call