Skip to content

LiquidImage

Open Graph image with Tailwind

A 1200×630 social image in Liquid with Tailwind classes, compiled at render time. Liquid passes options as keyword arguments (| image: width: 72), and an identical request with a live key within 24 hours is answered with the earlier file at zero units.

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

Rendered result

Rendered result: Open Graph image with Tailwind
PNG · 356 KB ↓ download

What this example shows

  • The settings fix the canvas: image with 1200×630 pixels, PNG and a device scale factor of 1, which is what social networks expect.
  • tailwind: true compiles the classes the markup uses at render time; there is no stylesheet to maintain.
  • truncate: 70 keeps a long headline inside the card, default: "Blog" fills a missing category, and image crops the avatar with fit: "cover".
  • access: "public" returns a CDN URL without a signature, which fits <meta property="og:image"> for as long as the file is kept; the retention of your plan decides how long that is.
  • With a live key, a request identical to one of the last 24 hours is answered with the earlier image and costs no units, so a second deploy on the same day renders nothing again. Renders with a test key are never deduplicated.

Helpers used

More on this use case: Open Graph image API →

Template folder

templates/og-image/template.htmlLiquid
<div class="flex h-[630px] w-[1200px] flex-col justify-between bg-gradient-to-br from-indigo-950 via-indigo-800 to-sky-600 p-20 text-white">
  <p class="text-2xl font-medium uppercase tracking-widest text-sky-200">
    {{ post.category | default: "Blog" }}
  </p>
  <h1 class="text-7xl font-bold leading-tight">{{ post.title | truncate: 70 }}</h1>
  <div class="flex items-center gap-6 text-2xl">
    {{ post.author.avatar | image: width: 72, height: 72, fit: "cover", alt: post.author.name, class: "rounded-full bg-white p-2" }}
    <span>{{ post.author.name }} · {{ post.published | date: "d MMM yyyy" }} · {{ post.minutes }} min read</span>
  </div>
</div>
templates/og-image/settings.jsonJSON
{
  "image": {
    "width": 1200,
    "height": 630,
    "deviceScaleFactor": 1,
    "format": "png"
  },
  "tailwind": true,
  "locale": "en-GB"
}
templates/og-image/data/default.jsonJSON
{
  "post": {
    "category": "Engineering",
    "title": "Templates belong in Git: reviewing invoice layouts in pull requests",
    "published": "2026-09-10",
    "minutes": 6,
    "author": {
      "name": "Formfeed",
      "avatar": "https://formfeed.dev/favicon.svg"
    }
  }
}

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: "og-image", data: ., output: "png", access: "public"}' 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: 'og-image',
  data,
  output: 'png',
  access: 'public',
});
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="og-image",
    data=data,
    output="png",
    access="public",
)
print(render.status, render.download_url)
render.phpPHP
<?php
$body = [
    'template' => 'og-image',
    'data' => json_decode(file_get_contents('data.json'), true),
    'output' => 'png',
    'access' => 'public',
];

$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": "og-image",
		"data":     json.RawMessage(data),
		"output":   "png",
		"access":   "public",
	})

	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 = "og-image",
    data = JsonDocument.Parse(File.ReadAllText("data.json")).RootElement,
    output = "png",
    access = "public",
};

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": "og-image",
          "output": "png",
          "access": "public",
          "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: "og-image",
  data: JSON.parse(File.read("data.json")),
  output: "png",
  access: "public",
}

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.