"Layer Recipes: Hide and Show, Colors, Gradients, Links, SVG, Lists, Tables and Borders"

These examples go inside the layers object (or inside a page's layers in the pages array) of a POST https://api.templated.io/v1/render request. The key is the layer name exactly as shown in the editor's Layers panel.

Full list of properties: https://templated.io/docs/renders/create/#layer-parameters

Hide a layer

"badge": { "hide": true }

There is no visible property. Use hide.

Show a layer only when needed

hide: false does not make a hidden layer visible. Use one of these two patterns:

• Keep the layer visible in the template, and send "hide": true in the renders where you do not want it.
• Set the layer opacity to 0 in the template, and send "opacity": 1 in the renders where you want to show it:

"sale-banner": { "opacity": 1 }

Change colors

Use hex colors with the #.

• Text color: color
• Shape or uploaded SVG color: fill
• Shape or SVG outline: stroke
• Background behind a layer: background

"title": { "text": "Summer Sale", "color": "#FF0000" },
"circle": { "fill": "#00AAFF" }

Two colors or fonts in the same text

Wrap part of the text in asterisks and set the secondary style:

"title": {
  "text": "Get *50% off* today",
  "color": "#000000",
  "color_2": "#FF0000"
}

The text between * uses color_2. You can also use font_family_2 for a second font. In the editor, you can select part of the text and change its style directly.

Gradients

Shapes and uploaded SVGs accept a CSS linear gradient in fill:

"background-shape": {
  "fill": "linear-gradient(90deg, #FF0000 0%, #0000FF 100%)"
}

Clickable links in PDFs

"cta": { "link": "https://example.com/shop" }

• The whole layer becomes clickable.
• The URL must start with http:// or https://.
• Links only work when the render format is pdf. Images (jpg, png, webp) cannot contain links.
• You can also set a link on a layer in the editor.
• Do not put <a href> tags inside the text property. Use link.

SVG images

image_url accepts SVG files as well as JPG, PNG and WebP. Vector and shape layers also accept image_url to swap the graphic with another file:

"logo": { "image_url": "https://example.com/logo.svg" }

The URL must be public. On image layers, use Object Fit (in the editor toolbar, or object_fit via API: cover, contain, fill, none) to control how the image fills the layer. For logos, use an image layer with contain to avoid stretching.

Lists and tables (the html property)

The text property is plain text. Do not wrap it in <p> tags. For bullet lists, numbered lists or simple tables, use html with inline styles:

"features": {
  "html": "<ul><li>Fast</li><li>Reliable</li><li>Simple</li></ul>"
}

"price-table": {
  "html": "<table style='width:100%'><tr><td>Basic</td><td>$10</td></tr><tr><td>Pro</td><td>$20</td></tr></table>"
}

Use inline style attributes. Custom CSS stylesheets and scripts are not supported. There is no native table or chart layer.

Borders and rounded corners

"photo": {
  "border_width": 4,
  "border_color": "#FFFFFF",
  "border_radius": "20px",
  "border_style": "solid"
}

border_radius accepts px or a percentage ("50%" for a circle). border_style can be solid, dashed or dotted.

Same value on several layers

Give several layers the same name in the editor. One entry in the payload updates all of them. Example: a footer layer on every page of a brochure:

"layers": { "footer": { "text": "www.example.com" } }

You can also use the same layer name on different pages. When you use the pages array, put each layer inside the page where it exists.

FAQ

Q: How do I hide a layer via API?
A: Send "hide": true for that layer. There is no visible property.

Q: How do I show a layer that is hidden in the template?
A: hide: false does not unhide it. Keep the layer visible and hide it when needed, or set its opacity to 0 in the template and send "opacity": 1.

Q: How do I change the color of a shape?
A: Use fill with a hex color, for example "fill": "#FF0000". For text use color.

Q: Can I add a link to my image or PDF?
A: Use the link property with a URL starting with https://. Links work in PDF renders only.

Q: Can I use an SVG as an image?
A: Yes. Send the SVG URL in image_url.

Q: How do I make a bullet list or a table?
A: Use the html property with <ul>, <ol> or <table> and inline styles.

Q: Can I color one word differently?
A: Yes. Wrap the word in *asterisks* and set color_2.

Q: How do I update the same text on every page?
A: Name the layers the same in every page and send one layers entry with that name.

Updated on: 01/10/2026