Template Editor Guide

Editor Layout#

The editor is divided into four main areas:

• Toolbar (top) — Tools for adding elements and controlling the canvas
• Layers Panel (left) — Shows all elements and their z-order
• Canvas (center) — The main design area where you arrange elements
• Properties Panel (right) — Edit properties of the selected element

Canvas Controls#

Navigation#

• Zoom In / Out — Use the zoom controls in the toolbar, scroll wheel, or pinch gesture
• Zoom to Cursor — Scroll wheel zooms toward the cursor position for precision
• Fit to Screen — Click the fit button (or press Shift+1) to auto-fit the canvas in view
• 100% Zoom — Press Shift+0 to reset to actual size
• Pan — Hold Space and drag, use middle mouse button, or scroll to pan around the canvas

Canvas Settings#

Click the Settings icon (gear) in the toolbar to adjust:

• Template Name — Display name for your template
• Template Slug — URL-friendly identifier used in API calls (auto-generated from name, can be customized)
• Canvas Width & Height — Dimensions of the output image in pixels
• Background Color — The canvas background color

Element Types#

Text#

Add text elements for headings, labels, body copy, or any dynamic text content.

Properties:

• Text Content — The default text to display
• Font Family — Choose from system fonts (Arial, Helvetica, Georgia, Times New Roman, Courier New, Verdana, Impact, Comic Sans MS) or any custom fonts you have uploaded via the Assets page. Uploaded fonts appear in a separate "Uploaded Fonts" section at the bottom of the dropdown
• Font Size — Size in pixels
• Font Weight — Normal, Bold, or numeric weights (100–900)
• Font Style — Normal or Italic
• Underline — Toggle underline decoration on the entire text element
• Strikethrough — Toggle strikethrough decoration on the entire text element
• Text Align — Left, Center, or Right
• Fill Color — Text color
• Rich Text Editor — Switch between Visual and Markdown modes to apply per-word and per-character formatting (bold, italic, underline, strikethrough, color, highlight, superscript, subscript, font, and font size) within a single text element. See Rich Text & Inline Styling for full documentation
• Text Strategy — Controls text overflow behavior:
  • Normal — Text renders at set size, may overflow
  • Auto-size — Font size automatically adjusts to fill the element bounds. Text shrinks when there is too much content and grows when there is little content
  • Truncate — Text is cut off with ellipsis when it overflows
  • Clip — Text is clipped at element bounds
• Fill text box (auto-size) — A convenience toggle that enables auto-sizing behavior. When checked, text automatically grows or shrinks to fill the text frame
• Min Font Size — Shown when Auto-size or Fill text box is enabled. Sets the minimum font size the auto-sizing algorithm will use, preventing text from becoming too small when there is too much content. Defaults to 4px
• Max Font Size — Shown when Auto-size or Fill text box is enabled. Sets the maximum font size the auto-sizing algorithm will use, preventing text from becoming too large when there is very little content. Defaults to 200px

Shape (box styling):

Text elements can have their own built-in background box — eliminating the need for a separate rectangle layer behind the text. This is especially useful for buttons, badges, and labels where the box should disappear automatically when the text element auto-hides (e.g., when its content is empty and visibility mode is set to Auto).

• Fill Color — Background color drawn behind the entire text bounding box. Click the color swatch to pick a color or type a hex value. Click the X button to remove the fill entirely (transparent)

• Fill Opacity — Opacity of the box fill, from 0 to 100%

• Stroke Color — Border color for the box

• Stroke Width — Border thickness. Use the px / % toggle to switch between a fixed pixel value or a percentage of the element's smallest dimension. In % mode, optional Min and Max fields clamp the resolved value to a pixel range. Set to 0 to disable the stroke. When a non-zero width is set without a color, the stroke color defaults to black

• Stroke Opacity — Opacity of the stroke, from 0 to 100%

• Stroke Align — Controls where the stroke is drawn relative to the box boundary:

  • Inner — Stroke is drawn entirely inside the box bounds
  • Center (default) — Stroke straddles the boundary, half inside and half outside
  • Outer — Stroke is drawn entirely outside the box bounds

• Corner Radius — Rounds the box corners. Use the px / % toggle to switch between a fixed pixel value or a percentage of the element's smallest dimension. In % mode, optional Min and Max fields clamp the resolved value to a pixel range (0 for sharp corners)

• Padding — Adds space between the box edge and the text content. Four individual values control each side (Top, Right, Bottom, Left). Use the unit toggle to switch between:

  • px — Fixed pixel padding on each side
  • %W — Percentage of the element's width. Entering the same value on all sides keeps padding visually proportional at any element size (e.g., 10%W on all sides = equal breathing room on all sides regardless of how wide or tall the element is)
  • %H — Percentage of the element's height. Useful when vertical padding should scale with height rather than width

  Padding works independently of box fill and stroke — you can add padding on any text element even without a visible background, to control how close the text gets to the element boundary.

Inline Editing on Canvas:

Double-click any text element on the canvas to enter inline editing mode. The text becomes editable directly on the canvas and a floating formatting toolbar appears above the selection. Select text and use the toolbar to apply bold, italic, underline, strikethrough, superscript, subscript, text color, highlight, font family, and font size to individual characters or words. Press Escape or click outside the text to exit inline editing mode. Keyboard shortcuts: Ctrl+B (bold), Ctrl+I (italic), Ctrl+U (underline). For full documentation, see Rich Text & Inline Styling.

Rectangle#

Add rectangular shapes for backgrounds, containers, buttons, or decorative elements.

Properties:

• Fill Color — Background color of the rectangle
• Corner Radius — Rounds the corners (0 for sharp corners). Toggle between px and % — percentage is relative to the element's smaller dimension (50% creates a pill/circle shape). When using %, optional Min and Max fields (in px) let you clamp the resolved value within a range
• Stroke Color — Border color (shown when stroke width > 0)
• Stroke Width — Border thickness. Toggle between px and % — percentage is relative to the element's smaller dimension, so borders scale proportionally when the element resizes. When using %, optional Min and Max fields (in px) let you clamp the resolved value within a range
• Stroke Alignment — Controls where the stroke is drawn relative to the shape boundary:
  • Inner — Stroke is drawn entirely inside the element bounds. The element's position and size stay the same, and the stroke eats into the fill area
  • Center (default) — Stroke straddles the shape boundary, half inside and half outside
  • Outer — Stroke is drawn entirely outside the element bounds. The element's position and size stay the same, and the stroke extends outward

Ellipse#

Add circles and oval shapes for avatars, badges, or decorative elements.

Properties:

• Fill Color — Background color
• Stroke Color — Border color
• Stroke Width — Border thickness. Toggle between px and % — percentage is relative to the element's smaller dimension. When using %, optional Min and Max fields (in px) let you clamp the resolved value within a range
• Stroke Alignment — Controls where the stroke is drawn relative to the shape boundary (Inner, Center, or Outer). See Rectangle section above for details

Line#

Add straight lines for dividers, borders, or decorative elements.

Properties:

• Stroke Color — Line color
• Stroke Width — Line thickness. Toggle between px and % — percentage is relative to the line's length. When using %, optional Min and Max fields (in px) let you clamp the resolved value within a range

QR Code#

Add QR code elements that encode dynamic data (URLs, text, vCard, etc.) as scannable QR codes.

Properties:

• Value / Data — The data to encode (URL, plain text, vCard, etc.)
• Dark Color — Color of the QR code modules (default: black)
• Light Color — Background color of the QR code (default: white, supports "transparent")
• Error Correction — Error correction level:
  • L (7%) — Low recovery capacity, smallest QR code
  • M (15%) — Medium recovery (default)
  • Q (25%) — Quartile recovery
  • H (30%) — High recovery, largest QR code
• Margin — Quiet zone around the QR code in modules (0–10, default: 2)
• Corner Radius — Rounds the corners of the QR code frame. Toggle between px and % — percentage is relative to the element's smaller dimension

Image#

Add image placeholders that can be populated with dynamic image URLs via the API.

Properties:

• Source URL — Default image URL
• Fill Mode — How the image fills its container:
  • Cover — Fills the entire area, cropping if needed
  • Contain — Fits within the area, may show background
  • Stretch — Stretches to fill exactly
  • Original — Displays at original size
• Fill Color — Background color behind the image (visible when using Contain mode or with transparency). Set to "transparent" by default
• Corner Radius — Rounds the corners of the image frame (0 for sharp corners). Toggle between px and % — percentage is relative to the element's smaller dimension (50% creates a pill/circle shape). When using %, optional Min and Max fields (in px) let you clamp the resolved value within a range
• Stroke Color — Border color around the image (shown when stroke width > 0)
• Stroke Width — Border thickness. Toggle between px and % — percentage is relative to the element's smaller dimension, so borders scale proportionally when the element resizes. When using %, optional Min and Max fields (in px) let you clamp the resolved value within a range
• Stroke Alignment — Controls where the stroke is drawn relative to the image boundary:
  • Inner — Stroke is drawn entirely inside the element bounds
  • Center (default) — Stroke straddles the boundary, half inside and half outside
  • Outer — Stroke is drawn entirely outside the element bounds

Working with Elements#

Selecting#

• Click an element on the canvas to select it
• Click an element in the Layers panel to select it
• Selected elements show resize handles on the canvas

Converting Element Type#

You can convert any element to a different type using the Type dropdown in the Properties panel. For example, convert a text element to an image element, or a rectangle to an ellipse.

When converting, compatible properties carry over automatically:

• Position, size, rotation, and opacity are always preserved
• Fill color carries over between shapes and text
• Stroke and corner radius carry over between shapes that support them
• Text content is preserved when converting back to text
• Image source is preserved when converting back to image
• The Dynamic flag is automatically set based on the new type (text, image, and QR code elements default to dynamic)

This is especially useful when refining templates created from AI image analysis, where the AI may have classified an element as text when it should be an image layer, or vice versa.

Moving & Resizing#

• Drag an element to reposition it
• Use the corner handles to resize
• Hold Shift while resizing to maintain aspect ratio

Transform (Position & Size)#

Use the Properties panel to enter exact values for:

• X / Y — Position from the top-left corner
• Width / Height — Exact dimensions
• Rotation — Angle in degrees
• Opacity — Transparency (0-100%)

You can toggle between px and % modes using the unit toggle in the Transform section:

• px — Absolute pixel values
• % — Relative to the artboard, with a configurable reference dimension per property. When % mode is active, each property (X, Y, Width, Height) shows a W/H toggle that controls whether the percentage resolves against the artboard width or height:
  • W (Width) — The percentage is calculated relative to the artboard width. This is the default for all properties
  • H (Height) — The percentage is calculated relative to the artboard height
  • Using width-based reference (default) for both X and Y ensures uniform spacing — for example, setting both X and Y to 10% means both resolve against the artboard width, producing equal pixel distances from the left and top edges regardless of the canvas aspect ratio

Pinning#

Pin an element to the canvas or to other layers for responsive layouts. The pinning panel offers six pin options organized by axis:

Edge pins position an element by its outer edges:

• Top — Anchors the element's top edge
• Bottom — Anchors the element's bottom edge
• Left — Anchors the element's left edge
• Right — Anchors the element's right edge

Center pins position an element by its center point:

• Center Y — Anchors the element's vertical center. The element's Y position is calculated as the resolved point minus half its height, keeping the element centered vertically at that point without changing its size
• Center X — Anchors the element's horizontal center. The element's X position is calculated as the resolved point minus half its width, keeping the element centered horizontally at that point without changing its size

Mutual exclusivity: Center Y is mutually exclusive with Top and Bottom — enabling Center Y automatically disables Top and Bottom, and vice versa. The same applies to Center X with Left and Right. This prevents conflicting positioning on the same axis.

For each enabled pin:

• Choose a target: canvas edge or any other layer in the template
• Set an offset in pixels or percent
• Use the From dropdown to choose which side of the target the offset is measured from:
  • Top/Bottom/Center Y pins can measure from Top, Center, or Bottom
  • Left/Right/Center X pins can measure from Left, Center, or Right
  • Defaults: Top defaults to "Top", Bottom defaults to "Bottom", Center Y defaults to "Center", Left defaults to "Left", Right defaults to "Right", Center X defaults to "Center"
  • Center anchor: When set to "Center", the offset is measured from the midpoint of the target element (or canvas). This is useful for centering an element relative to another element's midpoint

When to use Center pins vs. Edge pins:

• Use Center Y when you have a row of content and want an element (like a button, icon, or badge) to be vertically centered relative to adjacent content without stretching. For example, a CTA button at the far right of a row should use Center Y pinned to the content block beside it — this keeps the button at its natural height while aligning its vertical center to the content's midpoint

• Use Center X when you want an element horizontally centered relative to another element or the canvas without stretching its width

• Use Top + Bottom (dual-edge) when you want the element to stretch vertically to fill the space between two points

• Use Left + Right (dual-edge) when you want the element to stretch horizontally

• When using percent offsets, optionally set Min and Max pixel values to clamp the resolved offset (e.g., pin top at 10% but no less than 10px and no more than 50px)

• When a pin offset is set to %, a W/H reference dimension toggle appears next to the offset field. This controls whether the percentage resolves against the canvas width or height:

  • W (Width) — The percentage offset is calculated relative to the canvas width. This is the default for all edges, including top and bottom
  • H (Height) — The percentage offset is calculated relative to the canvas height
  • When to use Width reference: Use width-based reference (default) to maintain uniform spacing around elements. For example, pinning all four edges at 5% with width reference ensures equal pixel margins on all sides, regardless of canvas aspect ratio
  • When to use Height reference: Use height-based reference for top/bottom pins when you want vertical positioning to scale proportionally with canvas height changes (e.g., if your template is always rendered at the same width but variable heights)

• The pin sets an anchor point, and the element's own X/Y position adds on top as an additional offset (e.g., pin top at 0% + Y=10px = 10px from top)

• When opposite edges are pinned, the element stretches between them

Layer Order#

Elements are drawn in order from bottom to top. Use the Layers panel to:

• See all elements in stack order
• Toggle visibility (eye icon)
• Lock/unlock elements (lock icon)

Keyboard Shortcuts#

Shortcut	Action
T	Select Text tool
I	Select Image tool
R	Select Rectangle tool
E	Select Ellipse tool
L	Select Line tool
Q	Select QR Code tool
Ctrl/Cmd + S	Save template
Ctrl/Cmd + Z	Undo
Ctrl/Cmd + Shift + Z	Redo
Ctrl/Cmd + D	Duplicate selected
Ctrl/Cmd + Shift + C	Copy layer attributes
Ctrl/Cmd + Shift + V	Paste layer attributes
Delete / Backspace	Delete selected
Arrow keys	Nudge selected element by 1px
Shift + 1	Fit canvas to screen
Shift + 0	Zoom to 100%
Space + Drag	Pan the canvas

Copy & Paste Layer Attributes#

You can copy styling and configuration attributes from one layer and paste them onto one or more other layers to quickly apply consistent styling across your template.

How to Copy Attributes#

Select a single layer, then use any of these methods:

• Right-click the layer on the canvas or in the Layers panel and select Copy Attributes
• Keyboard shortcut: Ctrl/Cmd + Shift + C

A toast notification confirms when attributes have been copied.

How to Paste Attributes#

Select one or more target layers, then:

• Right-click on the canvas or in the Layers panel and select Paste Attributes
• Keyboard shortcut: Ctrl/Cmd + Shift + V

A dialog appears showing the attribute categories available for pasting. You can select or deselect categories before applying.

Attribute Categories#

Attributes are organized into categories:

• Universal (all element types): Appearance (opacity, visibility), Transform (rotation), Layout (pinning), Behavior (dynamic, fallback chain)
• Text: Typography, Text Style, Text Behavior, Text Background
• Image: Image Display, Image Styling
• Shape: Shape Styling, Shape Geometry
• QR Code: QR Styling

Cross-Type Pasting#

When pasting between different element types (e.g., text to rectangle), only universal attributes and overlapping properties (like fill color, opacity, stroke) are applied. Incompatible attributes are silently skipped. A notice appears in the paste dialog when types differ.

Important Notes#

• Identity preserved: Layer name, API name, position (x, y), and dimensions (width, height) are never overwritten
• Locked layers skipped: Locked layers are automatically skipped during paste with a warning
• Multi-select paste: Select multiple layers to paste attributes to all of them at once
• Undo support: Paste actions can be undone with a single Ctrl/Cmd + Z
• Session-only: Copied attributes are cleared when you switch templates or navigate away

API Payload Viewer#

The API Payload button (code icon) in the bottom-right corner of the canvas opens a modal displaying a ready-to-use curl command for generating an image via the RenderStack REST API.

The generated command is pre-populated with:

• Your template's slug
• Current canvas dimensions (including preview mode dimensions)
• All dynamic layers with their current values

Only layers marked as Dynamic are included in the payload. Each layer's API Name (the snake_case identifier auto-generated from the layer Name) is used as the key in the layers object. Click the Copy button to copy the full command to your clipboard.

Both buttons work with your current draft state — you don't need to save the template first.

Download Preview#

The Download Preview button (download icon) in the bottom-right corner renders the current template server-side and downloads the resulting image to your machine.

• The download reflects the current editor state, including unsaved changes
• A loading spinner appears while the image is being rendered
• The downloaded file is named <slug>_<width>x<height>.png
• This button is disabled until the template has been saved at least once

Saving Templates#

Click the Save button in the top toolbar or press Ctrl+S to save your template. The editor shows an "Unsaved changes" indicator when modifications haven't been saved yet.

When saving a new template, you'll be automatically redirected to the edit URL so subsequent saves update the same template.