​

Creating Templates

The template editor lets you design reusable visual layouts using a canvas-based interface. You place text, images, and shapes on the canvas, configure their properties, and define dynamic parameters that can be swapped in at render time. The template editor is available at /templates/new in your Soku dashboard.

---

​

Opening the Template Editor

1. Go to /templates in your Soku dashboard.
2. Click New Template.
3. You are taken to the template editor at /templates/new, which opens with a blank canvas.

To edit an existing template, click on it in the template catalog and select Edit.

---

​

The Template Editor Interface

The editor is organized into three main areas:

​

Canvas (Center)

The canvas is the main workspace where you design your template. It represents the exact output dimensions of the rendered image. You can:

• Click on elements to select them.
• Drag elements to reposition them on the canvas.
• Resize elements by dragging their handles.
• Use the canvas background to set a base color or background image.

​

Element Toolbar (Top or Left)

The toolbar provides buttons to add new elements to the canvas:

• Text — Add a text layer.
• Image — Add an image layer.
• Rectangle — Add a rectangle shape.

Click a button to add the element to the canvas at a default position. You can then move and configure it.

​

Properties Panel (Right Side)

When you select an element on the canvas, the properties panel on the right displays all configurable options for that element. Properties vary by element type (see the element reference below). When no element is selected (click on an empty area of the canvas), the properties panel shows the template-level settings: name, slug, type, and canvas dimensions.

---

​

Setting Up the Canvas

Before adding elements, configure your canvas dimensions. The canvas size determines the pixel dimensions of the rendered output. Common canvas sizes: Set the canvas width and height in the properties panel when no element is selected.

---

​

Adding and Configuring Elements

​

Text Elements

Text elements display static or dynamic text on the canvas. To add a text element:

1. Click Text in the element toolbar.
2. A new text layer appears on the canvas with placeholder text.
3. Select the element and use the properties panel to configure it.

Text element properties: Dynamic text example: Set the content to {{title}} and when the template is rendered with { "title": "5 Tips for Better Lighting" }, the text element will display “5 Tips for Better Lighting”. You can mix static and dynamic text in the same element: Written by {{author}} renders as “Written by Jane Smith” when author is “Jane Smith”.

​

Image Elements

Image elements display either a static image (uploaded at design time) or a dynamic image (provided at render time). To add an image element:

1. Click Image in the element toolbar.
2. A placeholder image layer appears on the canvas.
3. Select the element and configure it in the properties panel.

Image element properties: Dynamic image example: Set the source to {{thumbnailUrl}} and when the template is rendered with { "thumbnailUrl": "https://example.com/thumb.jpg" }, the image element will display that image.

​

Rectangle Elements

Rectangle elements are shapes used for backgrounds, cards, dividers, and overlays. To add a rectangle element:

1. Click Rectangle in the element toolbar.
2. A rectangle shape appears on the canvas.
3. Select it and configure its properties.

Rectangle element properties: Rectangles are commonly used as background cards behind text or as semi-transparent overlays on top of images to improve text readability.

---

​

Working with Layers

Elements on the canvas are stacked in layers. Elements added later appear on top of earlier ones. You can reorder layers to control the visual stacking order. To reorder layers:

• Select an element and use the layer controls in the properties panel (or right-click menu) to move it forward, backward, to the front, or to the back.

Common layer pattern:

1. Background image or full-canvas rectangle (bottom layer)
2. Semi-transparent rectangle overlay (middle layer)
3. Text elements and logo (top layers)

This pattern ensures text is readable over a background image.

---

​

Defining Dynamic Parameters

Dynamic parameters make your template reusable. Any text content or image source that uses the {{parameterName}} syntax becomes a parameter that must be provided at render time. When designing your template, plan which values should be dynamic:

---

​

Setting the Template Slug

Every template needs a unique slug — a short, URL-safe identifier used to reference the template in the API and in automation configurations. Set the slug in the template settings (visible in the properties panel when no element is selected). Slug guidelines:

• Use lowercase letters, numbers, and hyphens only.
• Keep it short and descriptive.
• Examples: tweetImage, branded-quote-card, og-blog-post, youtube-thumbnail.

---

​

Template Properties Summary

Each template has these top-level properties:

---

​

Saving and Previewing

​

Save

Click Save in the editor toolbar to save your template. The template is immediately available in your template catalog, in automations, and via the API. You can continue editing after saving.

​

Preview

Click Preview to render the template with sample data and see how it looks. The preview uses the default values you have set for each dynamic parameter, or placeholder values if none are set.

---

​

Step-by-Step: Creating a Branded Quote Card Template

Here is a complete walkthrough for creating a common template type — a branded quote card that displays a quote, author name, and your logo on a colored background.

1. Go to /templates/new.
2. Set the canvas size to 1080 x 1080 (Instagram square).
3. Add a Rectangle element that covers the full canvas. Set position to 0, 0 and size to 1080 x 1080. Set the fill color to your brand color (e.g., #1A1A2E).
4. Add an Image element for your logo. Upload your logo file. Set position to X: 60, Y: 60 and size to W: 120, H: 120.
5. Add a Text element for the quote. Set the content to {{content}}. Set the font to Inter, size 48, weight bold, color #FFFFFF, alignment center. Position it in the center of the canvas (e.g., X: 100, Y: 400, W: 880, H: 300).
6. Add a Text element for the author name. Set the content to -- {{author}}. Set the font to Inter, size 28, color #CCCCCC, alignment center. Position it below the quote text (e.g., X: 100, Y: 720, W: 880, H: 50).
7. Set the template name to “Branded Quote Card”.
8. Set the template slug to branded-quote-card.
9. Click Save.

You now have a reusable template that generates a branded quote card for any combination of content and author values you provide.

---

​

Tips

• Start with a background. Add a rectangle element first as your base layer, then build on top of it.
• Use consistent fonts. Stick to one or two font families for a clean, professional look.
• Keep text readable. Ensure sufficient contrast between text color and background. A semi-transparent overlay rectangle between a background image and text helps with readability.
• Test with real data. Use the preview feature with realistic sample text to catch layout issues like text overflow or awkward line breaks.
• Plan your parameters. Decide which values should be dynamic before you start building. It is easier to design around parameters than to add them later.

---

​

Related Pages

• Templates Overview
• Using Templates in Posts
• OG Image Templates
• Content Repurposing
• Templates API