You have product data: name, price, photo URL, description. Pass it to a template and get a branded product card image back.
Premium active noise cancelling with 40-hour battery life
You have product photos. When you share them on social media or in email, they're just photos. No price, no name, no brand. The customer has to click through to know what they're looking at.
Making branded product cards means a designer compositing each one: photo + name + price + brand. For 50 products that's a day of Figma work. For a full catalog, it's not realistic.
Build a product card template with variables for name, price, description, image URL, and brand. Query your database, pass the fields, mint a URL per product.
Batch-generate with POST /v1/urls for up to 25 at a time. Use the images for social sharing, email thumbnails, or marketplace listings. When you update the template, cards re-render on next request.
1// Generate product cards for your catalog2const products = await db.query("SELECT * FROM products WHERE featured = true");34const res = await fetch("https://api.htmlpix.com/v1/urls", {5 method: "POST",6 headers: {7 Authorization: `Bearer ${process.env.HTMLPIX_KEY}`,8 "Content-Type": "application/json",9 },10 body: JSON.stringify({11 items: products.map((p) => ({12 templateId: PRODUCT_CARD_TEMPLATE_ID,13 variables: {14 productName: p.name,15 price: `$${p.price}`,16 description: p.tagline,17 image: p.imageUrl,18 brand: "ACME",19 },20 width: 1200,21 height: 630,22 })),23 }),24});2526const { urls } = await res.json();27// urls[i].url → branded product card image for each productexport async function mintProductCards(products: {
name: string;
price: number;
tagline: string;
imageUrl: string;
}[]) {
const res = await fetch("https://api.htmlpix.com/v1/urls", {
method: "POST",
headers: {
Authorization: `Bearer ${process.env.HTMLPIX_KEY}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
items: products.map((p) => ({
templateId: process.env.PRODUCT_CARD_TEMPLATE_ID,
variables: {
productName: p.name,
price: `$${p.price}`,
description: p.tagline,
image: p.imageUrl,
brand: "ACME",
},
width: 1200,
height: 630,
})),
}),
});
const { urls } = await res.json();
return urls.map((u: any, i: number) => ({
productName: products[i].name,
cardUrl: u.url,
}));
}Designer composites each product card in Figma. 10-20 minutes per card. 100 products = a multi-day project. Start over when prices change.
Query your database, pass the fields, get product cards. When prices change, mint new URLs. The old ones still work with the old price.
Query your products, loop over them, mint URLs. 25 per API call. No per-product design work.
Price went up? Mint a new URL with the new price. The old URL keeps working with the old price. Nothing breaks.
Use the same product card URL as the og:image for each product page. When someone shares the link, they see the card.
Product card images in newsletters look the same in every email client. Better than trying to lay out product info with CSS tables.
A unique social preview for every page on your site. One template, one API call.
Personalized stats, dashboards, and banners rendered as images. Works in every email client.
Badges, year-in-review cards, and certificates your users can post on social media.
Post your key metrics to Slack or email as a clean dashboard image. Runs on a cron job.
One template, a spreadsheet of copy, and you have all your ad variants in minutes.
Just migrated our OG images to @htmlpix. Should have done this months ago.
Show customer quotes on your site as styled cards. No embed scripts, no API keys.
500 images per month on Starter. Turn your product database into branded cards.
Get Your API Key