MostlyRender

Vorlagen als Parameter

Eine MostlyRender-Vorlage ist eine Arbeitsfläche (Breite × Höhe, Hintergrund) plus ein Stapel benannter Ebenen. Die Kernidee:

Der Ebenename ist der API-Parameter. Um zu ändern, was eine Ebene zur Renderzeit anzeigt, senden Sie modifications, die nach dem Namen der Ebene verschlüsselt sind.

# Änderungen

Gegeben eine Vorlage mit einer Textebene namens title, einer Bildebene namens photo und einer QR-Ebene namens link:

json
{
  "template": "tpl_abc",
  "modifications": {
    "title": "Renders that never go dark",
    "photo": "https://example.com/hero.jpg",
    "link": "https://mostlyrender.com"
  }
}
  • Ein String auf einer Textebene setzt ihren Text.
  • Ein String auf einer Bildebene setzt ihr src.
  • Ein String auf einer QR-Ebene setzt den codierten Wert.
  • Ein Objekt wird in die Ebene zusammengeführt, so können Sie auch Stile überschreiben:
json
{ "modifications": { "title": { "text": "On sale", "color": "#e11d48" } } }

Ebenen, die Sie nicht erwähnen, behalten ihre gestalteten Standardwerte. Unbekannte Ebenennamen werden ignoriert.

# Der Hintergrund der Arbeitsfläche ist auch ein Parameter

Der Hintergrund der Arbeitsfläche ist keine Ebene, daher hat er einen reservierten Parameternamen: background (Kleinbuchstaben). Senden Sie ihn in modifications, um den Hintergrund zur Renderzeit zu wechseln — die gleichen Solid-/Gradienten-/Bildformulare, die der Editor erzeugt:

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}} im Hintergrund

Anstatt den gesamten Hintergrund zu ersetzen, kann eine Vorlage Platzhalter hineinbacken und Sie füllen sie pro Render. Setzen Sie im Hintergrund-Panel des Editors einen Wert, der {{param}} enthält; dann übergeben Sie diesen Parameter 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" } }

Standardwerte für Platzhalter können in den vars der Vorlage leben; eine Änderung desselben Namens überschreibt den Standardwert. Hintergrund-Platzhalter werden roh ersetzt (sie landen in CSS, nicht in HTML), daher wird eine URL-Abfragezeichenfolge (?w=1&h=2) wörtlich beibehalten.

# Vorlagen auflisten

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" }
  ]
}

Verwenden Sie die id als template in einem Render-Aufruf. Verwalten Sie Vorlagen (erstellen, bearbeiten, löschen) im App-Editor.