OpenGraph Social Image API

The OpenGraph Social Image API compiles a OG Card document (1200 × 630 px card) from a single JSON payload. The layout is defined as a canvas document of positioned elements — text blocks, bound variables, tables, QR codes and barcodes — and the shared rendering engine paints each element onto a pixel-accurate page before export. Because the engine runs entirely in the browser, the payload you paste never leaves your device.

The template ships with 3 documented variables: 2 required and 1 optional. Required fields must be present for a clean compile; optional fields simply render as empty space when omitted. The sample payload in the workbench is a working example you can edit and compile to see the exact output.

Every element is addressed by millimetre coordinates on a fixed page grid, so the same payload always produces the same document. That determinism is what makes the template safe to drive from an automated pipeline: there is no layout engine guessing at reflow, no font substitution drift, and no server round-trip that could reorder or truncate your data.

There are four supported ways to produce this document, from a one-off manual export to a fully unattended pipeline. Choose the one that matches how often the data changes.

• Studio editing. Open the template in the studio to inspect and adjust every element. Drag blocks, change fonts and colours, and rebind any variable to a different payload field. The inspector pane shows the live coordinate grid so you can align blocks to the millimetre.
• Single compile. Edit the JSON in the workbench above and press Compile PDF to export a print-ready document. This is the fastest path for a one-off document and the best way to validate a payload before wiring it into a pipeline.
• Batch generation. The bulk generator accepts a CSV or JSON array and compiles one document per row — ideal for invoices, certificates, payslips and shipping labels. Each row is an independent payload, so a malformed row fails alone instead of aborting the whole run.
• Stateless URL-hash API. Encode the document and payload into the URL hash and open the render route from any client — a webhook handler, a script, or an email template. The renderer is intentionally public and client-side, so it holds no stored data and needs no authenticated key.

For repeat runs, keep the payload shape stable and let the pipeline vary only the values. Because the template binds named keys rather than positional fields, you can add columns to your source data without touching the layout.

The table below lists every variable the template reads, its JSON type, whether it is required, and what it controls. Bind these keys in your payload object; nested table sections expect an array of objects whose keys match the table columns.

This template renders fixed-position blocks rather than a repeating table, so every value is bound directly to a named key in the payload.

Types are advisory but enforced at compile time: a date field expects an ISO-8601 string, a number field expects a numeric literal, and a text field accepts any string. Missing required fields surface as a validation error before export, so you never ship a half-rendered document.

Values can be transformed with mustache filter pipes. The engine supports {{amount | currency("USD")}} for locale-aware currency formatting, {{code | render_barcode(type="code128", height=48)}} for an inline Code128 symbol, and {{code | render_qrcode(size=96)}} for a QR matrix. Filters chain left to right, so a value can be formatted and then encoded in a single expression.

The OG Card preset measures 317.5 × 166.7 mm and renders at 96 DPI on screen, scaling to print resolution on export. Margins are controlled per element, so you can match a specific printer or label stock by adjusting the canvas coordinates in the studio. The preview above uses the same engine as the export, so what you see is what prints.

Output is vector-clean at any scale: text stays selectable in the PDF and the PNG export is rendered at 2× for crisp on-screen display.

Treat the payload as the single source of truth. Keep the template layout stable and version your payload schema alongside your application code, so a field rename is a deliberate change rather than a silent break in production.

• Privacy by default. Compilation is 100% client-side. Sensitive fields — patient details, salary figures, invoice totals — never leave the browser, which keeps this template suitable for regulated data.
• Deterministic output. The same payload always produces the same document, so exports are reproducible and safe to diff or archive.
• Validate before batch. Compile the sample payload once to confirm the layout, then run the batch. A clean single compile is the fastest signal that your data shape matches the schema.
• Recover from a bad row. In batch mode each row compiles independently; fix the offending row and re-run only that slice rather than the whole set.

This template belongs to the Developer Converters cluster. Explore the related templates below — each ships with its own interactive workbench, documented variable schema and print specification.

• JSON to PDF Converter
• HTML to PDF Invoice
• CSV to Bulk PDF Generator
• Webhook JSON to PDF
• Tailwind to PDF Studio
• Mustache Template to PDF