Guides / Java
Pages with custom social cards get measurably more clicks than a generic logo when shared on X, LinkedIn or Slack. Designing one image per blog post by hand doesn't scale — RasterKit renders them from an HTML template with {{variables}} you fill from Java.
Design the card once (plain HTML/CSS — gradients, fonts, avatars), store it as a template, then request /v1/image with a title and author per page. Combine with signed URLs and your og:image tag can point directly at the API.
Sign up free (magic link, no card) — your key is shown right after sign-in. You get 100 renders/month free across screenshots, PDFs, and images.
Store a template once (dashboard or POST /v1/templates) — HTML/CSS with
{{variables}} — then render it with per-page values:
import java.net.URI;
import java.net.http.*;
import java.nio.file.*;
import java.time.Duration;
public class Render {
public static void main(String[] args) throws Exception {
String body = """
{"template_id": "tpl_your_template", "variables": {"title": "Hello World", "author": "Paul"}}""";
HttpRequest request = HttpRequest.newBuilder()
.uri(URI.create("https://rasterkit.com/v1/image"))
.timeout(Duration.ofSeconds(60))
.header("x-api-key", System.getenv("RASTERKIT_API_KEY"))
.header("content-type", "application/json")
.POST(HttpRequest.BodyPublishers.ofString(body))
.build();
HttpResponse<byte[]> res = HttpClient.newHttpClient()
.send(request, HttpResponse.BodyHandlers.ofByteArray());
if (res.statusCode() != 200) {
throw new RuntimeException("Render failed: " + res.statusCode() + " " + new String(res.body()));
}
Files.write(Path.of("og-image.png"), res.body());
System.out.println("Saved og-image.png");
}
}The response body is the file itself — no JSON envelope to unwrap, no second download request. Errors come back as JSON with a stable error code.
The OG Image API reference documents every parameter. The ones people reach for first:
width/height — defaults to the OG standard 1200×630device_scale_factor: 2 — retina-sharp textcache_ttl: 604800 — published posts don't change; cache for 7 days freeog:image straight at the API1200×630 (the default) renders crisply everywhere — X, Facebook, LinkedIn, Slack, iMessage. Use device_scale_factor: 2 for retina-sharp text.
Yes — {{variable}} values are HTML-escaped by default. Use triple braces {{{variable}}} only for trusted markup.
Yes — load Google Fonts or any @font-face in your template; the engine waits for fonts to be ready before capturing.