MostlyRender

Modelos como parâmetros

Um modelo MostlyRender é uma tela (largura × altura, fundo) mais uma pilha de camadas nomeadas. A ideia-chave:

O nome da camada é o parâmetro da API. Para alterar o que uma camada mostra no momento da renderização, envie modifications com chave do nome da camada.

# Modificações

Dado um modelo com uma camada de texto chamada title, uma camada de imagem chamada photo e uma camada QR chamada link:

json
{
  "template": "tpl_abc",
  "modifications": {
    "title": "Renders that never go dark",
    "photo": "https://example.com/hero.jpg",
    "link": "https://mostlyrender.com"
  }
}
  • Uma string em uma camada de texto define seu texto.
  • Uma string em uma camada de imagem define seu src.
  • Uma string em uma camada QR define o valor codificado.
  • Um object é mesclado na camada, para que você possa sobrescrever estilos também:
json
{ "modifications": { "title": { "text": "On sale", "color": "#e11d48" } } }

Camadas que você não menciona mantêm seus padrões projetados. Nomes de camadas desconhecidos são ignorados.

# O fundo da tela é um parâmetro também

O fundo da tela não é uma camada, então tem um nome de parâmetro reservado: background (minúsculas). Envie-o em modifications para trocar o fundo no momento da renderização — as mesmas formas sólidas / gradiente / imagem que o editor produz:

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

// uma imagem (a URL deve ser uma URL http(s) pública — data-URIs são rejeitadas pela proteção SSRF)
{ "modifications": { "background": { "type": "image", "src": "https://cdn.example.com/hero.png", "fit": "cover" } } }

# {{placeholders}} dentro de um fundo

Em vez de substituir todo o fundo, um modelo pode incorporar placeholders nele e você os preenche por renderização. No painel Background do editor, defina um valor contendo {{param}}; então passe esse parâmetro em modifications:

jsonc
// fundo do modelo (definido no editor): {{brandColor}}
// ou uma imagem:  url("{{heroUrl}}") center/cover
{ "modifications": { "brandColor": "#ff5a00", "heroUrl": "https://cdn.example.com/u/42.png" } }

Os padrões para placeholders podem estar na vars do modelo; uma modificação com o mesmo nome substitui o padrão. Os placeholders de fundo são substituídos raw (eles acabam em CSS, não HTML), então a string de consulta de uma URL (?w=1&h=2) é preservada literalmente.

# Listando modelos

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 o id como o template em uma chamada de renderização. Gerencie modelos (criar, editar, deletar) no editor do aplicativo.