Real estate listings, job posts, product launches, quotes, sports scores, weekly stats: many teams post the same kind of image over and over with different data. Designing each one in Canva doesn't scale and design tool APIs are expensive. Build the design once as an HTML template, then render one image per row of data, at every platform's size.
Sizes by platform
| Placement | Size (px) |
|---|---|
| Instagram feed, square | 1080 × 1080 |
| Instagram feed, portrait | 1080 × 1350 |
| Instagram and TikTok stories, Reels covers | 1080 × 1920 |
| LinkedIn and Facebook link or image post | 1200 × 627 |
| X image post | 1600 × 900 |
| Pinterest pin | 1000 × 1500 |
Set viewport_width and viewport_height to the size, and make your template fill the viewport with 100vw and 100vh so one template serves every size.
A quote card
curl -X POST "https://shotkit.net/api/take" \
-H "X-Access-Key: YOUR_ACCESS_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"<div style=\"box-sizing:border-box;width:100vw;height:100vh;padding:96px;display:flex;flex-direction:column;justify-content:center;gap:40px;background:#fdf2f8;font-family:Georgia,serif;color:#831843\"><div style=\"font-size:64px;line-height:1.2\">“Simplicity is prerequisite for reliability.”</div><div style=\"font:600 32px system-ui\">— Edsger W. Dijkstra</div></div>","viewport_width":1080,"viewport_height":1350,"format":"jpg","image_quality":90}' \
--fail-with-body -o shot.jpgShort videos from the same template
Animate the template with CSS and record it as MP4 for Reels, TikTok or a LinkedIn video post. Recording starts once the page is ready and runs for animation_duration seconds:
curl -X POST "https://shotkit.net/api/take" \
-H "X-Access-Key: YOUR_ACCESS_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"<style>@keyframes up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}} h1{animation:up 1s ease-out both} p{animation:up 1s .6s ease-out both}</style><div style=\"width:100vw;height:100vh;display:grid;place-content:center;text-align:center;background:#111827;color:#fff;font-family:system-ui\"><h1 style=\"font-size:72px;margin:0\">Q3 in numbers</h1><p style=\"font-size:36px\">+42% new customers</p></div>","viewport_width":720,"viewport_height":1280,"format":"mp4","animation_duration":4}' \
--fail-with-body -o shot.mp4Videos are recorded at 1×, so the viewport size is the video's resolution.
Producing posts in bulk
- Keep data out of the template: render a route of your app like
/social/listing/123withurl, or fill the HTML on your server. - Loop over your rows; use
asyncwith awebhook_urlfor large batches. - Use
external_identifierto match each finished image to its row, then hand it to your scheduler (Buffer, Hootsuite or the platform's API).
Frequently asked questions
Is there a Zapier or Make integration?
There's no dedicated app, but both can call the API with their HTTP module: a POST to /api/take with your access key and the template, returning the image or its URL.
Can I use my brand fonts?
Yes. Load them with @font-face from an absolute URL or from Google Fonts, and add "wait_until": ["networkidle0"] so they're loaded before the capture.
PNG or JPG?
JPG at quality 85–90 for photos and gradients, which platforms recompress anyway; PNG for text-heavy graphics with flat colors.
Can I add a photo from my CMS?
Yes. Use the image's absolute URL in an <img> or as a CSS background-image; it loads like on any web page.