Canvas editor

The canvas editor is where you design image templates: social cards and Open Graph images, email headers, display ads, certificates, badges and labels. You place elements on an artboard and mark the properties that change from render to render as dynamic. Then you render the template through the API with your data. Canvas templates render to PNG (the default), JPEG, WebP or PDF.

The editor's instant preview and our renderer draw the design with the same scene renderer, so what you see in the editor is what the API returns. PDF templates written in HTML and CSS use the other editor, see Template language.

Create an image template

• In the dashboard, choose New template → Blank image for an empty 1200 × 630 canvas. Pick another size under Artboard.
• Or filter the gallery by Format → Image and choose Use this template on one of the image templates: Open Graph images, email headers, display ads, testimonials, sale banners and event cards.

In the dashboard, image templates have the type Image (image_canvas in the API). The editor needs a desktop-width window; on smaller screens the dashboard shows a notice instead.

The editor at a glance

The panels can be resized, and the editor remembers their widths.

Artboard and output

With nothing selected, the Design tab shows the artboard and the output settings.

• Size. Pick a preset or enter a custom size, up to 8000 × 8000 px. The presets are:

  Group	Presets
  Web	Open Graph 1200 × 630, Email header 600 × 200, Full HD 1920 × 1080
  Social	X/Twitter 1600 × 900, Instagram square 1080 × 1080, Instagram portrait 1080 × 1350, Story 1080 × 1920, LinkedIn 1200 × 627, Facebook 1200 × 630, Pinterest 1000 × 1500, YouTube 1280 × 720
  Ads	Leaderboard 728 × 90, Medium rectangle 300 × 250, Wide skyscraper 160 × 600
  Print	Certificate 1754 × 1240, A4 portrait 794 × 1123, Name badge 600 × 900, Shipping label 384 × 576

• Background. None (transparent), a solid colour, a linear or radial gradient, or an image.

• Default format. PNG, JPEG, WebP or PDF. Renders use it unless the request names another format; see Render with your data.

• Scale. The output is the artboard size times the scale. The API accepts 1 to 3; 2 gives sharp images on high-density screens.

• Quality. For JPEG and WebP. Without a value, renders use 85 for JPEG and 80 for WebP.

• Transparent background. For PNG and WebP. The file then has no artboard background at all; the instant preview doesn't show this, the server preview does.

• File name. The name of the rendered file.

A PDF from a canvas template is one page at the artboard size, converted at 96 px per inch. It is billed like any PDF render, and it can't be PDF/UA. See Plans and limits.

Elements

Add elements from the Elements tab: a click places one in the middle of the view, inside the selected frame, or drag it onto the canvas. The tools in the toolbar draw text, rectangles, ellipses, lines, images and frames directly.

Every element has a position, size and rotation, can be flipped and skewed, and has opacity, a blend mode, up to 8 drop or inner shadows and a layer blur. Shapes and frames take a fill (solid, linear or radial gradient, or an image) and a stroke with dashes, line ends, corner joins and a position inside, centred on or outside the edge. Rectangles and frames can round each corner separately.

Text that fits its box

A text box can grow with its text (Auto width, Auto height) or keep a Fixed size. For text that comes from your data, two settings keep the design intact:

• Auto-fit sets a minimum and maximum font size. Each render uses the largest size between them at which the text fits the box.
• Max lines and Overflow cut text that is still too long, with an ellipsis if you like.

Text that is cut off, or that overflows its box, is reported with the warning text_overflow.

Frames, auto layout and constraints

A frame groups elements in a container with its own fill, stroke and corner radius, and can clip what sticks out (Clip content).

With auto layout, a frame arranges its children in a row or a column, with a gap, padding, alignment and distribution. Each child is Fixed, Hug contents or Fill container. A badge whose background grows with its text is a frame with auto layout around a text element.

Constraints decide how an element moves or resizes when the element it's attached to changes size: per axis left or top, centre, right or bottom, stretch, or scale. An element can be attached to its parent or, with Anchor, to another element, for example a price tag that stays to the right of a headline of any length. Constraints don't apply to children that auto layout arranges.

Images

The image picker has these tabs:

• Upload image: PNG, JPEG, WebP, GIF or SVG up to 10 MB, kept in the workspace's assets
• Workspace assets: images uploaded before
• Stock photos: a search over Unsplash and Pexels, where your dashboard offers it
• Image URL: any public image address

You can also drop an image file on the canvas or paste an image URL. Images from other websites reach the editor through our image proxy, up to 20 MB each.

Fonts

The font picker offers the built-in fonts, Inter and Noto Sans, and a search over about 150 Google Fonts families. The dashboard serves those fonts itself, so editing a template never contacts Google.

If a font can't be loaded, the editor and the renderer use Noto Sans instead and report the warning font_fallback_used.

Dynamic properties

Canvas templates have no placeholders in the text. Instead, you make individual properties dynamic: select an element, open the Data tab and choose Make … dynamic for each property that your data should set. A headline's text, a photo's address, a QR code's content or a badge's visibility are typical examples.

Each dynamic property has an API key, by default element.property, such as headline.text or hero.src. The element's name is part of the key, so renaming an element changes its default keys. Give a property its own API key if integrations already use it. Keys are letters, digits, - and _, in up to four dotted parts.

For each dynamic property you can set a Default, a Field label and Description (shown in Zapier and Make), Required, a Max length with Truncate longer values, a Minimum and Maximum, and Allowed values.

There are no conditions or loops in a canvas template. To show or hide an element per render, make its visible property dynamic. Lists of values go to charts.

The API accepts decides what renders may change: Dynamic properties only (the default), or Any property of a named element for designs that were built before the properties were made dynamic.

Dynamic properties take effect when you publish. GET /v1/templates/{id}/schema lists the dynamic_properties of the live version.

Sample data

The Data tab also holds the template's sample data. Generate from dynamic properties fills it with every key and its default; edit the values to see the design with realistic data. The database button in the toolbar, Show the sample data on the canvas, puts the sample data on the canvas; switch it off again to edit.

Copy JSON example copies a data object with every key, and Copy Zapier/Make field list the input fields for those tools.

Render with your data

Send the dynamic properties in data, with POST /v1/images/from-template for an image:

curl https://api-eu.dynamicdocumentapi.com/v1/images/from-template \
  -H "Authorization: Bearer $DYNAMIC_DOCUMENT_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template_id": "tpl_01J9ZK3M7Q8V5W2X4Y6Z8A0B1C",
    "data": {
      "headline.text": "Spring sale: 30 % off everything",
      "hero.src": "https://example.com/spring.jpg",
      "qr.content": "https://example.com/sale",
      "badge.visible": false
    },
    "format": "png"
  }'

• Data shapes. Keys can be flat, as above, or nested per element: "headline": { "text": "…" }. A null value counts as not sent, so the property keeps its default.
• Format. POST /v1/images/from-template renders PNG when the request names no format, whatever the template's default format is. POST /v1/renders without output.format uses the template's default. For a PDF, call POST /v1/pdf/from-template.
• Values are converted where that is unambiguous. Booleans accept true, 1, yes and on (and their opposites), numbers can be strings, colours can be hex, rgb() or CSS names, and lists can be JSON arrays or comma-separated text. Image addresses must be https://, http:// or data: URLs.
• Problems with single values don't fail the render. An unknown key, a key that isn't dynamic, or a value that can't be used is reported as the warning data_coerced, and the property keeps its designed value. A missing required property, or data that isn't an object, fails with data_invalid. To reject any mismatch before rendering, turn on Validate data against the schema in the template's settings; such requests then fail with 422 data_schema_mismatch.
• Test keys render with a TEST watermark and cost nothing.

Renders use the template's live version. Signed links render a canvas template from a URL without an API key, for images in web pages and emails. More on image output in Image options.

Preview, save and publish

The editor saves your draft 1.5 seconds after each change. If someone else saved the template in the meantime, it asks whether to keep your version or take theirs.

The Preview tab has two previews:

• Instant preview: drawn in the browser with the active sample data, updated as you edit, at 0.5×, 1× or 2×, with the warnings the render would report.
• Server render (⌘↵): a render by our servers with the sample data. It's free and carries a PREVIEW watermark. Compare side by side shows both, with the share of pixels that differ.

The toolbar's Export downloads PNG, JPEG or WebP straight from the browser, without a watermark. Download PDF uses the server preview, watermark included.

Publish turns the draft into a new, immutable version that renders use from then on. A design with problems, which the bottom bar lists, can't be published. Under Versions you can make an older version live again or copy it into the draft; Revert draft to live version discards the draft's changes.

Warnings

The inspector shows Rendering warnings for the selected element, and the Layers panel marks elements that have any. The same warnings come back in a render's warnings:

See Errors and warnings for every code.

Keyboard shortcuts

Keyboard shortcuts in More actions lists them in the editor. On Windows and Linux, use Ctrl for ⌘ and Alt for ⌥.

With the mouse: ⌘-click selects inside groups, ⇧ while dragging keeps to one axis, ⇧ while rotating snaps to 15°, and ⌥ while resizing scales from the centre.

Limits

An 8000 px artboard at scale 3 is 24,000 px wide and too large; lower the scale or the artboard.

Related pages

• Image options for formats, sizes and image renders in general
• Renders for the render object, versions and delivery
• Signed links to serve canvas images from a URL
• Errors and warnings for scene_invalid, data_invalid and the warnings