PICTIFY
Data Bindings

Generate images
from any data source.

Bind templates to HTTP endpoints, Google Sheets, or webhooks. When data changes, images follow.

Most template APIs require you to pass every variable on every render call. Your backend fetches the data, builds the JSON payload, POSTs to the render endpoint. It works, but it ties the render caller to the data schema. A marketing team wants to update a field? They file a ticket with the engineering team to change the payload.

Pictify's live data bindings invert the pattern. The template knows where to fetch data; the render caller just identifies which row to render. Engineers ship the template once; non-technical teams manage the content in a Sheet or the app's CRM. The binding layer does the fetch at render time.

Five binding patterns that work

Template ↔ Product API

Template binds to /api/products/:id. Render URL identifies the product; template pulls current name/price/stock and paints.

Template ↔ Google Sheet

Non-technical content team maintains rows in a Sheet. Template renders each row as a graphic. Edit the cell, next render reflects it.

Template ↔ CRM

Template binds to your HubSpot / Salesforce / Stripe record. Personalized customer images (upgrade prompts, renewal nudges) pull from the single source of truth.

Template ↔ Analytics

Template binds to your PostHog / Mixpanel API. Renders a per-user or per-cohort stats card with live numbers — embed in dashboards, emails, Slack bots.

Template ↔ Webhook receiver

Your app POSTs data to a Pictify webhook endpoint; the template renders whatever the latest POST contained. Perfect for event-triggered images (deploy notifications, incident alerts, build status badges).

Example: bind a template to your product API

binding-config.json
// Define the binding in the Pictify dashboard or via API:
{
  "type": "http",
  "url": "https://api.yourapp.com/products/${product_id}",
  "headers": { "Authorization": "Bearer ${env.YOUR_API_KEY}" },
  "timeout_ms": 3000,
  "cache_ttl_seconds": 60,
  "mapping": {
    "name":  "$.title",
    "price": "$.variants[0].price",
    "stock": "$.variants[0].inventory"
  }
}

// Render call: no variables needed — the template fetches them.
// Only identify the row:
curl -X POST https://api.pictify.io/template/tpl_product/render \
  -H "Authorization: Bearer $PICTIFY_API_KEY" \
  -d '{"variables": {"product_id": "abc123"}}'

// Template pulls /products/abc123 and paints name/price/stock.

Frequently asked questions

How do I generate images directly from a data source? +

Pictify lets templates fetch variables themselves via bindings. Configure a binding with an HTTP endpoint, webhook URL, or static JSON source. When you call render, the template pulls current data from the binding and paints it. Your render request doesn't need to pass the variables — the template handles the fetch.

What data sources can I bind to? +

HTTP endpoints (any REST or GraphQL API), webhook URLs, Google Sheets (via a connector), static JSON (posted once, cached), and your own webhook receivers. Multiple bindings per template are supported — one for user data, another for product data, a third for feature flags.

Does the binding fetch on every render? +

By default yes — the template always pulls fresh data. You can configure a cache TTL per binding (e.g., 60 seconds) to batch-fetch when high-traffic renders would hammer the source. For data that changes every few minutes, a short TTL is the sensible default.

Can I bind to Google Sheets? +

Yes. Connect your Sheet via the Pictify dashboard; pick the sheet and column mapping. Each render pulls the row identified by a key (e.g., product ID → row). When you edit the sheet, the next render reflects the change. Common pattern: non-technical teams maintain content in Sheets, designers build the template, engineers just call render.

How does this compare to passing variables on every render call? +

Two advantages. (1) Your backend doesn't need to know where the data lives — the template handles the fetch. (2) You decouple the data source from the rendering caller. A frontend JavaScript call can render an image without exposing the data source to the browser.

What if the bound data source is slow or down? +

Bindings have configurable timeouts (default 3s) and fallbacks (stale-while-revalidate cache, or default values). If the source is down beyond timeout, Pictify uses the last successful fetch or fails gracefully with a documented error code. Full control over the failure mode.

Data Bindings

Bind once. Render forever.

Real expression engine

{{ price * 0.9 | currency }} is a first-class template feature — not a string you pre-format in your backend. Conditionals, filters, nested lookups, all built in.

Live data bindings

Templates connect to HTTP endpoints, webhooks, or static JSON. Images update when data updates. Nothing else in the category ships this.

API + no-code, same product

Designers build templates in a visual canvas. Engineers call one endpoint. No hand-off, no context switch, no rebuild.

A/B experiments on images

Ship variants of a template, track impressions and conversions per variant, declare a winner — all from the same API that renders the image.

One API, many outputs

PNG, JPEG, WebP, multi-page PDF, GIF. Same template, different fileExtension. No separate service for each format.

Agentic AI copilot

"Make a dark-mode variant," "resize this for Instagram Story," "generate five backgrounds." The copilot edits templates step by step, not as a single-shot generator.

Related solutions