Skip to content

HandlebarsImage

Review card, 1080×1080

A square card for Instagram and LinkedIn from one customer review: range and lt draw the rating as five stars, truncate keeps a long quote inside the square, and the date of the review is written out as month and year.

Free plan, no card. You get your own copy in the editor, published and ready for the API.

Rendered result

Rendered result: Review card, 1080×1080
PNG · 117 KB ↓ download

What this example shows

  • settings.image fixes the square: 1080 × 1080 pixels at a device scale factor of 1, which Instagram and LinkedIn show without cropping.
  • {{#each (range 0 5)}} draws five stars and (lt this ../review.rating) colours as many as the rating: four amber stars and one grey.
  • {{truncate review.quote 240}} cuts a quote that would not fit after 240 characters and ends it with an ellipsis.
  • The large quotation mark is CSS, blockquote::before, so the data carries the plain text of the review.

Helpers used

Template folder

templates/review-card/template.htmlHandlebars
<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>
templates/review-card/style.cssCSS
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; }
templates/review-card/head.htmlHTML
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Playfair+Display:wght@600&display=swap">
templates/review-card/settings.jsonJSON
{
  "image": {
    "width": 1080,
    "height": 1080,
    "deviceScaleFactor": 1,
    "format": "png"
  },
  "locale": "en-GB"
}
templates/review-card/data/default.jsonJSON
{
  "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"
  }
}

Render it through the API

Save the sample data as data.json and send it with the template’s name. TypeScript and Python use the SDKs; every other language posts the same JSON to the REST API with its standard library. Renders with a key that starts with ff_test_ are not metered; on the Free plan they carry a small watermark.

render.shShell
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 @-
render.tsTypeScript
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);
render.pyPython
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)
render.phpPHP
<?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;
main.goGo
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)
}
Program.csC#
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")}");
Render.javaJava
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 …
  }
}
render.rbRuby
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"]

Start rendering today

The free plan includes 100 units a month and free test renders. Change plans when you need more.