MostlyRender

Sjablonen als parameters

Een MostlyRender-sjabloon is een canvas (breedte × hoogte, achtergrond) plus een stapel benoemde lagen. Het kernidee:

De laagnaam is de API-parameter. Om te wijzigen wat een laag tijdens renderen toont, stuur je modifications met sleutels naar de naam van de laag.

# Wijzigingen

Gegeven een sjabloon met een tekstlaag genaamd title, een afbeeldingslaag genaamd photo, en een QR-laag genaamd link:

json
{
  "template": "tpl_abc",
  "modifications": {
    "title": "Renders that never go dark",
    "photo": "https://example.com/hero.jpg",
    "link": "https://mostlyrender.com"
  }
}
  • Een string op een tekstlaag stelt de tekst in.
  • Een string op een afbeeldingslaag stelt de src in.
  • Een string op een QR-laag stelt de gecodeerde waarde in.
  • Een object wordt samengevoegd met de laag, zodat je ook stijlen kunt overschrijven:
json
{ "modifications": { "title": { "text": "On sale", "color": "#e11d48" } } }

Lagen die je niet noemt, behouden hun ontworpen standaardwaarden. Onbekende laagnamen worden genegeerd.

# De canvas-achtergrond is ook een parameter

De canvas-achtergrond is geen laag, dus heeft het een gereserveerde parameternaam: background (kleine letters). Stuur het in modifications om de achtergrond tijdens renderen te wisselen — dezelfde effen / verloop / afbeeldingsvormen die de editor produceert:

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}} in een achtergrond

In plaats van de hele achtergrond te vervangen, kan een sjabloon placeholder erin bakken en vul je die per render. In het Background-paneel van de editor stelt je een waarde in met {{param}}; dan geef je die parameter door 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" } }

Standaardwaarden voor placeholder kunnen in de vars van het sjabloon staan; een wijziging met dezelfde naam overschrijft de standaardwaarde. Achtergrond-placeholder worden onbewerkt vervangen (ze belanden in CSS, niet in HTML), dus een URL’s querystring (?w=1&h=2) blijft verbatim behouden.

# Sjablonen weergeven

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

Gebruik de id als de template in een render-oproep. Beheer sjablonen (maken, bewerken, verwijderen) in de app-editor.