MostlyRender

Les modèles comme paramètres

Un modèle MostlyRender est un canevas (largeur × hauteur, arrière-plan) plus une pile de couches nommées. L’idée clé :

Le nom de la couche est le paramètre API. Pour modifier ce qu’une couche affiche au moment du rendu, envoyez des modifications indexées par le nom de la couche.

# Modifications

Étant donné un modèle avec une couche de texte nommée title, une couche d’image nommée photo et une couche de code QR nommée link :

json
{
  "template": "tpl_abc",
  "modifications": {
    "title": "Renders that never go dark",
    "photo": "https://example.com/hero.jpg",
    "link": "https://mostlyrender.com"
  }
}
  • Une chaîne de caractères sur une couche de texte définit son texte.
  • Une chaîne de caractères sur une couche d’image définit son src.
  • Une chaîne de caractères sur une couche de code QR définit la valeur encodée.
  • Un objet est fusionné dans la couche, vous pouvez donc aussi remplacer le style :
json
{ "modifications": { "title": { "text": "On sale", "color": "#e11d48" } } }

Les couches que vous ne mentionnez pas conservent leurs valeurs par défaut conçues. Les noms de couches inconnus sont ignorés.

# L’arrière-plan du canevas est aussi un paramètre

L’arrière-plan du canevas n’est pas une couche, il a donc un nom de paramètre réservé : background (minuscules). Envoyez-le dans modifications pour changer l’arrière-plan au moment du rendu — les mêmes formes (couleur unie / dégradé / image) que l’éditeur produit :

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}} à l’intérieur d’un arrière-plan

Au lieu de remplacer l’arrière-plan entier, un modèle peut intégrer des espaces réservés et vous les remplissez à chaque rendu. Dans le panneau Background de l’éditeur, définissez une valeur contenant {{param}}; puis transmettez ce paramètre dans 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" } }

Les valeurs par défaut des espaces réservés peuvent se trouver dans les vars du modèle ; une modification du même nom remplace la valeur par défaut. Les espaces réservés d’arrière-plan sont substitués bruts (ils atterrissent dans le CSS, pas HTML), donc la chaîne de requête d’une URL (?w=1&h=2) est conservée exactement.

# Énumération des modèles

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

Utilisez l’id comme template dans un appel de rendu. Gérez les modèles (créer, modifier, supprimer) dans l’éditeur de l’application.