Getting Started
First Design

Creating Your First Design

This tutorial walks you through creating a complete design template in the Canvelete editor (opens in a new tab). You'll learn the core concepts needed to build dynamic, reusable templates.

What We'll Build

A social media announcement template with:

  • Background gradient
  • Dynamic headline text
  • Profile image placeholder
  • Call-to-action button

Step 1: Create a New Design

  1. Go to your Canvelete dashboard (opens in a new tab)
  2. Click Create New Design
  3. Select Custom Size and enter:
    • Width: 1080
    • Height: 1080
  4. Click Create

Step 2: Add a Background

  1. Select the Rectangle tool from the left toolbar (or press R)
  2. Draw a rectangle covering the entire canvas
  3. In the right panel, set:
    • Fill: Choose a gradient (e.g., linear-gradient(135deg, #667eea 0%, #764ba2 100%))
    • Position: X: 0, Y: 0
    • Size: Width: 1080, Height: 1080

Step 3: Add Dynamic Text

  1. Select the Text tool (or press T)
  2. Click on the canvas and type: {{headline}}
  3. Style the text:
    • Font: Poppins or Inter
    • Size: 72px
    • Weight: Bold
    • Color: White (#FFFFFF)
    • Alignment: Center
  4. Position it in the upper third of the canvas

The {{headline}} syntax creates a variable. When rendering, you'll pass the actual headline text via the API.

Step 4: Add a Profile Image

  1. Select the Image tool (or press I)
  2. Draw a square on the canvas (hold Shift for perfect square)
  3. In the properties panel:
    • Set Width and Height to 200
    • Enable Border Radius: 100 (makes it circular)
    • Set the Source to: {{profileImage}}
  4. Center it below the headline

Step 5: Add a CTA Button

  1. Add a Rectangle:
    • Width: 300, Height: 60
    • Fill: White (#FFFFFF)
    • Border Radius: 30
  2. Add Text on top:
    • Content: {{ctaText}}
    • Font Size: 24px
    • Color: #667eea
    • Weight: Bold
  3. Group both elements (select both, then Ctrl+G)
  4. Position at the bottom of the canvas

Step 6: Preview with Test Data

  1. Click the Preview button in the top toolbar
  2. Enter test values: 
    {
  "headline": "Welcome to Canvelete!",
  "profileImage": "https://example.com/avatar.jpg",
  "ctaText": "Get Started"
}
  3. See your design update in real-time

Step 7: Save and Export

  1. Click Save (or Ctrl+S)
  2. Give your design a name: "Social Announcement Template"
  3. Note the design ID from the URL for API use

Render via API

Now generate images with different data:

curl -X POST "https://api.canvelete.com/v1/render/design/YOUR_DESIGN_ID" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "format": "png",
    "dynamicData": {
      "headline": "New Feature Launch!",
      "profileImage": "https://example.com/product.jpg",
      "ctaText": "Learn More"
    }
  }'

Design Best Practices

Use Descriptive Variable Names

  • ✅ {{userName}}, {{productPrice}}, {{eventDate}}
  • ❌ {{x}}, {{text1}}, {{var}}

Set Default Values

In the editor, you can set fallback values for variables that might be empty.

Organize with Layers

  • Name your layers descriptively
  • Group related elements
  • Lock background layers to prevent accidental edits

Test Edge Cases

  • Long text that might overflow
  • Missing images (use placeholder)
  • Different aspect ratios

Next Steps

Quick StartInstallation