MostlyRender

Templates as parameters

A MostlyRender template is a canvas (width × height, background) plus a stack of named layers. The key idea:

The layer name is the API parameter. To change what a layer shows at render time, send modifications keyed by the layer’s name.

# Modifications

Given a template with a text layer named title, an image layer named photo, and a QR layer named link:

json
{
  "template": "tpl_abc",
  "modifications": {
    "title": "Renders that never go dark",
    "photo": "https://example.com/hero.jpg",
    "link": "https://mostlyrender.com"
  }
}
  • A string on a text layer sets its text.
  • A string on an image layer sets its src.
  • A string on a QR layer sets the encoded value.
  • An object is merged into the layer, so you can override styling too:
json
{ "modifications": { "title": { "text": "On sale", "color": "#e11d48" } } }

Layers you don’t mention keep their designed defaults. Unknown layer names are ignored.

# The canvas background is a parameter too

The canvas background isn’t a layer, so it has a reserved parameter name: background (lowercase). Send it in modifications to swap the background at render time — the same solid / gradient / image forms the editor produces:

json
{
  "template": "tpl_abc",
  "modifications": {
    "title": "Q3 results",
    "background": "#0b1020"
  }
}
jsonc
// a gradient
{ "modifications": { "background": { "type": "gradient", "value": "linear-gradient(135deg,#23204a,#5b5bd6)" } } }

// an image (URL must be a public http(s) URL — data-URIs are rejected by the SSRF guard)
{ "modifications": { "background": { "type": "image", "src": "https://cdn.example.com/hero.png", "fit": "cover" } } }

# {{placeholders}} inside a background

Instead of replacing the whole background, a template can bake placeholders into it and you fill them per render. In the editor’s Background panel, set a value containing {{param}}; then pass that param in modifications:

jsonc
// template background (set in the editor): {{brandColor}}
// or an image:  url("{{heroUrl}}") center/cover
{ "modifications": { "brandColor": "#ff5a00", "heroUrl": "https://cdn.example.com/u/42.png" } }

Defaults for placeholders can live in the template’s vars; a modification of the same name overrides the default. Background placeholders are substituted raw (they land in CSS, not HTML), so a URL’s query string (?w=1&h=2) is preserved verbatim.

# Listing templates

bash
curl https://api.mostlyrender.com/v1/templates \
  -H "Authorization: Bearer mr_live_…"
json
{
  "templates": [
    { "id": "tpl_abc", "name": "Launch card", "width": 1200, "height": 630, "engine": "layers" }
  ]
}

Use the id as the template in a render call. Manage templates (create, edit, delete) in the app editor.