Try it. See it. Make it yours.

Use a reference image to review the sharing result.

A standard card and an accented-title variant provide concrete files for testing a visual layout.

Fictional PHOTO NOTES article share-card example at 1200 by 630 pixels, showing a bold headline and portrait.

Reference share card · 1200 × 630

A local visual reference for comparing layout and text rendering.

Download example
Fictional Open Graph image at 1200 by 630 pixels with the non-ASCII headline Café, ideas and new horizons.

Accented-title variant · 1200 × 630

A second reference uses accented characters in the headline.

Download example
TEMPLATE

Name the fields that change per page

Keep page title, cover and other changing values mapped to the saved template’s element_name identifiers.

Read the template contract →
DELIVERY

Check the public image used by the page

Verify the image URL and the resulting share preview in your own publishing environment. The downloadable references are local compositions, not API responses.

Compare a repeatable evaluation method →

Fictional local design references, not customer results or API responses. Dimensions illustrate these files, not universal platform requirements. Confirm the intended placement before publishing.



Open Graph image generation with the Image Automation API


Instead of drawing social cards route by route in code, you keep the layout inside Pixelixe. Your application only sends what changes: page title, cover image, category label, author avatar, URL, or theme color. That makes og:image generation safer, faster, and easier to maintain across content-heavy products.

If your workflow starts from CMS publish hooks, docs deploys, changelog releases, or editorial content updates more broadly, see the CMS Social Image API page for the publishing-workflow view of the same rendering model.

If you are implementing this specifically inside a Next.js app, use the Next.js Open Graph Image API guide for route handlers, metadata wiring, and publish-time rendering.

If you are implementing this specifically inside a Next.js app, use the Next.js Open Graph Image API guide for route handlers, metadata wiring, and publish-time rendering.



Template-driven social cards

One saved social card template, many API-driven og:image variants

Reference a saved Pixelixe template with document_uid or template_name, then send only the route-specific layer changes required for this page, post, product, or documentation entry.

  • Update text, image, shape, and background layers per route.
  • Keep brand-safe layout logic in the saved social card template.
  • Choose the response format that fits your pipeline: image, json, base64, pdf, or html.
  • Use custom_field to map each generated card back to your slug, route, or CMS record.

Pixelixe Open Graph image template rendering preview

See the Image Automation API overview ...

cURL request

EXAMPLE 01
curl https://studio.pixelixe.com/api/graphic/automation/v2 \
  -d 'json={
    "document_uid": "og_template_uid",
    "api_key": "YOUR_API_KEY",
    "format": "json",
    "image_type": "png",
    "custom_field": "docs/open-graph-image-api",
    "modifications": [
      {
        "element_name": "eyebrow",
        "type": "text",
        "text": "Developer docs"
      },
      {
        "element_name": "headline",
        "type": "text",
        "text": "Open Graph image API for route-based social cards",
        "font-size": "auto",
        "color": "#0f172a"
      },
      {
        "element_name": "subheadline",
        "type": "text",
        "text": "Generate branded og:image assets from one reusable template"
      },
      {
        "element_name": "page-url",
        "type": "text",
        "text": "pixelixe.com/developers/open-graph-image-api"
      },
      {
        "element_name": "cover",
        "type": "image",
        "image_url": "https://cdn.example.com/og/covers/open-graph-api.png",
        "width": "cover",
        "height": "cover"
      },
      {
        "element_name": "accent",
        "type": "shape",
        "background-color": "#1f6feb"
      }
    ]
  }'

JSON response

EXAMPLE 02
{
  "status": "success",
  "created_at": "03-31-2026_15-18-22-401",
  "uid": "og_template_uid",
  "custom_field": "docs/open-graph-image-api",
  "image_url": "https://studio.pixelixe.com/storage/file/.../open-graph-image-api.png"
}
Implementation note: use format: "json" when you want a hosted image_url that your app can attach to og:image and twitter:image. Switch to format: "image" for a raw binary response, or format: "html" when you want to reopen the generated card in the editor.

Why engineers choose template-first Open Graph generation


More control than screenshot-based social cards, with less layout code to maintain.



Stable branded previews

Your social card structure lives in Pixelixe, so backend code only manages route data and layer updates, not layout coordinates.

Route-level metadata control

Update title, subtitle, route URL, label, cover image, or author data without recreating the entire card for every page.

CMS-friendly publishing

Generate images on publish, on update, or in background jobs so every page gets the right social preview asset automatically.

Easy metadata wiring

Return hosted image URLs or raw image responses, then attach them to og:image and Twitter card metadata in your app.


What you can change per request


The API is designed around a modifications array. Each entry targets an existing element in your saved Open Graph image template and overrides only the properties needed for that route.



Text layers

Update page titles and supporting metadata without rebuilding the layout.

  • headline, subtitle, section label, route URL, author, date
  • color
  • font-size with auto, original, or an explicit px value
  • text-align
  • font-family

Image layers

Swap cover art, author avatars, logos, or thumbnails with public asset URLs.

  • image_url
  • width and height with auto, cover, or original
  • visible to show or hide a layer
  • shape for rounded avatar-style outputs

Shapes and background

Update accent bars, category tags, overlays, or the global canvas background.

  • background-color
  • border-color
  • border-size
  • background-image as a target element name

Output behavior

Pick the response mode that matches your pipeline.

  • format: image, json, base64, pdf, html
  • image_type: jpeg or png
  • custom_field for correlation and debugging

How to get started


Use the same endpoint from CMS hooks, backend jobs, docs pipelines, or publishing systems.



JavaScript / Node.js

EXAMPLE 03
const payload = {
  document_uid: "og_template_uid",
  api_key: process.env.PIXELIXE_API_KEY,
  format: "json",
  image_type: "png",
  custom_field: route.slug,
  modifications: [
    {
      element_name: "headline",
      type: "text",
      text: route.title,
      "font-size": "auto"
    },
    {
      element_name: "subheadline",
      type: "text",
      text: route.description
    },
    {
      element_name: "cover",
      type: "image",
      image_url: route.coverImage,
      width: "cover",
      height: "cover"
    },
    {
      element_name: "accent",
      type: "shape",
      "background-color": route.themeColor || "#1f6feb"
    }
  ]
};

const body = new URLSearchParams({
  json: JSON.stringify(payload)
});

const response = await fetch(
  "https://studio.pixelixe.com/api/graphic/automation/v2",
  {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    body
  }
);

const data = await response.json();
const ogImageUrl = data.image_url;

Python

EXAMPLE 04
import json
import requests

payload = {
    "document_uid": "og_template_uid",
    "api_key": "YOUR_API_KEY",
    "format": "json",
    "image_type": "png",
    "custom_field": route["slug"],
    "modifications": [
        {
            "element_name": "headline",
            "type": "text",
            "text": route["title"],
            "font-size": "auto"
        },
        {
            "element_name": "subheadline",
            "type": "text",
            "text": route["description"]
        },
        {
            "element_name": "cover",
            "type": "image",
            "image_url": route["cover_image"],
            "width": "cover",
            "height": "cover"
        }
    ]
}

response = requests.post(
    "https://studio.pixelixe.com/api/graphic/automation/v2",
    data={"json": json.dumps(payload)},
    timeout=30
)
response.raise_for_status()
data = response.json()
og_image_url = data["image_url"]
Tip: render on publish or update, store the returned image_url next to the slug or route, then attach it to your metadata layer instead of rendering the card on every request.

Common backend flows for Open Graph images


Docs and changelog pages

Render social cards automatically for documentation pages, release notes, changelogs, and developer articles when the title or section changes.

Blog and editorial publishing

Generate unique preview cards for blog posts, newsletters, landing pages, and editorial content directly from your CMS title, cover image, and taxonomy fields. If your main need is the content workflow rather than the endpoint implementation, see Social Share Image Automation.

Programmatic SEO pages

Attach a stable visual layer to large sets of programmatic landing pages while keeping brand consistency and unique route-level metadata.

Ecommerce collections and products

Render social preview cards for product pages, category pages, product drops, and seasonal collections with consistent brand treatment.

Localized content systems

Keep one social card layout while switching language, subtitle, route URL, and visual treatment per locale or market.

Headless publishing workflows

Generate, cache, and store preview assets as part of a headless CMS or publishing pipeline instead of manually designing social cards route by route.

How integration works


Use Studio for template setup, then let your backend or CMS own the render loop.



1

Save an OG template

Design the base social card in Pixelixe Studio and name the layers you plan to target from code.

2

Build the payload

Send document_uid, api_key, output format, and the element-level modifications needed for this route.

3

Render and attach metadata

Receive the generated output as a URL, blob, base64 string, PDF, or HTML variant and attach the image to og:image and related social metadata.

4

Repeat at scale

Repeat this for slugs, locales, content types, publishing events, or programmatic page generation without touching the layout again.



Read full API documentation

Developer FAQ


Do we need to send the full social card layout on every request?

No. Save the layout once in Pixelixe Studio, then call the Image Automation API with document_uid or template_name plus the modifications for that route.

Can we update titles, covers, and category labels dynamically?

Yes. Target text, image, shape, or background layers and send the route-specific values in the modifications array for each render.

Can we use the output for Open Graph and Twitter cards?

Yes. The same generated image can be referenced from og:image and from Twitter/X card metadata as long as your application stores and serves the returned image URL correctly.

How can we attach our own route or CMS identifiers?

Use custom_field when format is json. Pixelixe returns it in the response so you can correlate each generated image with your slug, route, or content record.

Can we localize Open Graph images by language or market?

Yes. Keep one template and switch the title, subtitle, cover image, or theme treatment per locale while preserving the same design system.

Which response formats are supported?

The API supports image, json, base64, pdf, and html. For og:image generation, teams usually use format: "json" to recover a hosted image_url.

Open Graph image generation at a glance


Useful context for developers, buyers, and AI systems reading this page.



What it does

Pixelixe renders Open Graph images from saved templates so your backend or CMS only sends the data and layer changes required for each route.

Who it is for

It is built for engineering teams, CMS platforms, docs sites, blogs, SaaS products, and programmatic SEO systems that need reliable branded social previews.

What it accepts and returns

Inputs are saved templates plus a modifications array from code. Outputs can be image, json, base64, pdf, or html depending on how you attach and store the card.


Explore the full endpoint reference, compare plans on pricing, see the broader Image Automation API landing, or pair this with the white-label editor for editable social card workflows.


Explore related social image workflows


Open Graph image generation sits between the API hub, template rendering workflows, and broader social content automation.



API hub

Review the complete Pixelixe API platform before choosing the banner rendering path that fits your stack.

Rendering endpoint

Use the developer rendering endpoint when your workflow already starts from structured payloads and approved templates.

Dynamic Banner Generation

Move from route-level social cards to broader campaign, banner, and lifecycle image rendering workflows driven by the same API model.

Next.js Open Graph Image API

Use the Next.js-specific guide when route data, App Router metadata, and publishing jobs need to generate branded social preview images.

Next.js Open Graph Image API

Use the Next.js-specific guide when route data, App Router metadata, and publishing jobs need to generate branded social preview images.

CMS Social Image API

Move from protocol-level metadata toward broader CMS, docs, changelog, and editorial publishing workflows that generate share images from content events.

Image Automation API

See the broader template automation platform behind Open Graph images, dynamic banners, catalog visuals, and automated creative generation.




Ready to generate Open Graph images from your backend?

Start with a reusable social card template in Pixelixe Studio, connect the Image Automation API, and render branded og:image assets on demand from your own services or publishing stack.


Start a 10-day trial
Read the docs