HandlebarsBild
Bewertungskarte, 1080×1080
Eine quadratische Karte für Instagram und LinkedIn aus einer Kundenbewertung: range und lt zeichnen die Bewertung als fünf Sterne, truncate hält ein langes Zitat im Quadrat, und das Datum der Bewertung steht als Monat und Jahr da.
Kostenloser Plan, keine Kreditkarte. Sie erhalten eine eigene Kopie im Editor, veröffentlicht und bereit für die API.
Gerendertes Ergebnis
Was dieses Beispiel zeigt
settings.imagelegt das Quadrat fest:1080×1080Pixel bei Device-Scale-Factor1, was Instagram und LinkedIn ohne Beschnitt zeigen.{{#each (range 0 5)}}zeichnet fünf Sterne, und(lt this ../review.rating)färbt so viele, wie die Bewertung angibt: vier bernsteinfarbene und einen grauen.{{truncate review.quote 240}}kürzt ein Zitat, das nicht passen würde, nach 240 Zeichen und schließt es mit Auslassungspunkten.- Das große Anführungszeichen ist CSS,
blockquote::before; die Daten enthalten also nur den Text der Bewertung.
Verwendete Helfer
Vorlagenordner
<main class="card">
<header>
<p class="brand">{{brand.name}}</p>
<p class="stars" aria-label="{{review.rating}} out of 5">{{#each (range 0 5)}}<span class="{{#if (lt this ../review.rating)}}on{{/if}}">★</span>{{/each}}</p>
</header>
<blockquote>{{truncate review.quote 240}}</blockquote>
<footer>
<p class="author">{{review.author}}</p>
<p class="muted">{{review.role}}, {{review.company}}</p>
<p class="muted">{{review.source}} · {{date review.date "MMMM yyyy"}}</p>
</footer>
</main>body { margin: 0; }
.card {
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 1080px;
height: 1080px;
padding: 96px;
background: #f5efe6;
font-family: 'Inter', sans-serif;
color: #1c1917;
}
header { display: flex; justify-content: space-between; align-items: center; }
.brand { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #92400e; }
.stars { margin: 0; font-size: 52px; letter-spacing: 6px; color: #d6d3d1; }
.stars .on { color: #d97706; }
blockquote { margin: auto 0; font-family: 'Playfair Display', serif; font-size: 60px; font-weight: 600; line-height: 1.22; }
blockquote::before { content: '“'; display: block; height: 70px; font-size: 150px; line-height: 1; color: #d97706; }
.author { margin: 0; font-size: 36px; font-weight: 600; }
.muted { margin: 8px 0 0; font-size: 28px; color: #78716c; }<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Playfair+Display:wght@600&display=swap">{
"image": {
"width": 1080,
"height": 1080,
"deviceScaleFactor": 1,
"format": "png"
},
"locale": "en-GB"
}{
"brand": {
"name": "Fennlor Studio"
},
"review": {
"quote": "We fitted out two floors of our office with Fennlor desk lamps. Delivery took two days, and the one shade that arrived dented was replaced before we had finished the call.",
"author": "Jane Doe",
"role": "Office manager",
"company": "Olvarest Ltd",
"rating": 4,
"source": "Customer review",
"date": "2026-09-14"
}
}Über die API rendern
Speichern Sie die Beispieldaten als data.json und senden Sie sie mit dem Namen der Vorlage. TypeScript und Python nutzen die SDKs; jede andere Sprache schickt dasselbe JSON mit ihrer Standardbibliothek an die REST-API. Renderings mit einem Schlüssel, der mit ff_test_ beginnt, werden nicht gezählt; im Free-Tarif tragen sie ein kleines Wasserzeichen.
jq '{template: "review-card", data: ., output: "png"}' data.json \
| curl https://api-eu.formfeed.dev/v1/renders \
-H "Authorization: Bearer ff_test_..." \
-H "Content-Type: application/json" \
--data-binary @-import { Formfeed } from '@formfeed/sdk';
import data from './data.json' with { type: 'json' };
const formfeed = new Formfeed({ apiKey: process.env.FORMFEED_API_KEY! });
const render = await formfeed.renders.create({
template: 'review-card',
data,
output: 'png',
});
console.log(render.status, render.download_url);import json
import os
from formfeed import Formfeed
formfeed = Formfeed(api_key=os.environ["FORMFEED_API_KEY"])
with open("data.json", encoding="utf-8") as file:
data = json.load(file)
render = formfeed.renders.create(
template="review-card",
data=data,
output="png",
)
print(render.status, render.download_url)<?php
$body = [
'template' => 'review-card',
'data' => json_decode(file_get_contents('data.json'), true),
'output' => 'png',
];
$curl = curl_init('https://api-eu.formfeed.dev/v1/renders');
curl_setopt_array($curl, [
CURLOPT_POST => true,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HTTPHEADER => [
'Authorization: Bearer ' . getenv('FORMFEED_API_KEY'),
'Content-Type: application/json',
],
CURLOPT_POSTFIELDS => json_encode($body),
]);
$render = json_decode(curl_exec($curl), true);
echo $render['status'], ' ', $render['download_url'], PHP_EOL;package main
import (
"bytes"
"encoding/json"
"fmt"
"net/http"
"os"
)
func main() {
data, err := os.ReadFile("data.json")
if err != nil {
panic(err)
}
body, _ := json.Marshal(map[string]any{
"template": "review-card",
"data": json.RawMessage(data),
"output": "png",
})
request, _ := http.NewRequest("POST", "https://api-eu.formfeed.dev/v1/renders", bytes.NewReader(body))
request.Header.Set("Authorization", "Bearer "+os.Getenv("FORMFEED_API_KEY"))
request.Header.Set("Content-Type", "application/json")
response, err := http.DefaultClient.Do(request)
if err != nil {
panic(err)
}
defer response.Body.Close()
var render struct {
Status string `json:"status"`
DownloadURL string `json:"download_url"`
}
json.NewDecoder(response.Body).Decode(&render)
fmt.Println(render.Status, render.DownloadURL)
}using System.Net.Http.Headers;
using System.Net.Http.Json;
using System.Text.Json;
var body = new
{
template = "review-card",
data = JsonDocument.Parse(File.ReadAllText("data.json")).RootElement,
output = "png",
};
using var http = new HttpClient();
http.DefaultRequestHeaders.Authorization =
new AuthenticationHeaderValue("Bearer", Environment.GetEnvironmentVariable("FORMFEED_API_KEY"));
var response = await http.PostAsJsonAsync("https://api-eu.formfeed.dev/v1/renders", body);
var render = await response.Content.ReadFromJsonAsync<JsonElement>();
Console.WriteLine($"{render.GetProperty("status")} {render.GetProperty("download_url")}");import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import java.nio.file.Files;
import java.nio.file.Path;
public class Render {
public static void main(String[] args) throws Exception {
String data = Files.readString(Path.of("data.json"));
String body = """
{
"template": "review-card",
"output": "png",
"data": %s
}
""".formatted(data);
HttpRequest request = HttpRequest.newBuilder(URI.create("https://api-eu.formfeed.dev/v1/renders"))
.header("Authorization", "Bearer " + System.getenv("FORMFEED_API_KEY"))
.header("Content-Type", "application/json")
.POST(HttpRequest.BodyPublishers.ofString(body))
.build();
HttpResponse<String> response = HttpClient.newHttpClient().send(request, HttpResponse.BodyHandlers.ofString());
System.out.println(response.body()); // status, download_url, page_count, units …
}
}require "json"
require "net/http"
body = {
template: "review-card",
data: JSON.parse(File.read("data.json")),
output: "png",
}
response = Net::HTTP.post(
URI("https://api-eu.formfeed.dev/v1/renders"),
JSON.generate(body),
"Authorization" => "Bearer #{ENV.fetch("FORMFEED_API_KEY")}",
"Content-Type" => "application/json"
)
render = JSON.parse(response.body)
puts render["status"], render["download_url"]Heute mit dem Rendern beginnen
Der kostenlose Plan enthält 100 Einheiten im Monat und kostenlose Testrenderings. Wechseln Sie den Plan, wenn Sie mehr brauchen.
