Photo with border & text image template

Photo with border & text
{
    "timeline": {
        "background": "#000000",
        "fonts": [
            {
                "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/LilitaOne-Regular.ttf"
            }
        ],
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p>Shotstack enables businesses to massively scale their video production capabilities using code.</p>",
                            "css": "p { font-family: \"Lilita One\"; color: #ffd300; font-size: 64px; text-align: center; }",
                            "width": 600,
                            "height": 600,
                            "background": "transparent"
                        },
                        "start": 0,
                        "length": 1
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p>Shotstack enables businesses to massively scale their video production capabilities using code.</p>",
                            "css": "p { font-family: \"Lilita One\"; color: #e90ec0; font-size: 64px; text-align: center; }",
                            "width": 600,
                            "height": 600,
                            "background": "transparent"
                        },
                        "start": 0,
                        "length": 1,
                        "offset": {
                            "x": 0.004,
                            "y": -0.004
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/borders/80s-acid-pink-square.png"
                        },
                        "start": 0,
                        "length": 1
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/images/earth.jpg"
                        },
                        "start": 0,
                        "length": 1
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "jpg",
        "quality": "high",
        "size": {
            "width": 1000,
            "height": 1000
        }
    }
}

Photo with border and drop shadow style text in retro colors.

Open in Studio

No account needed until you render.

Render with your AI assistant

Open in Claude Open in ChatGPT

Add the Shotstack MCP server to your editor, then paste the prompt

Add to Cursor Install in VS Code Other clients

When you want to automate this

Any batch of photos in, a finished video out.

1
See it
OutputJPG
Size1000 × 1000 (1:1)
Length1s
Frame ratedefault (25 fps)
Tracks / clips4 / 4
Assets used2 html, 2 image
Soundtrackno
Merge fieldsnone (edit the JSON)
2
Make it yours

Swap these in the JSON:

  • 2 HTML/text blocks
  • 2 image URLs

To drive it from data, turn any value into a {{ PLACEHOLDER }} merge field.

3
Run it once

Save the JSON above as template.json, then render in the free sandbox:

# Save the JSON above as template.json, then:
curl -X POST https://api.shotstack.io/edit/stage/render \
  -H "x-api-key: $SHOTSTACK_API_KEY" \
  -H "Content-Type: application/json" \
  -d @template.json

# Poll until status is "done", then download response.url
curl https://api.shotstack.io/edit/stage/render/RENDER_ID -H "x-api-key: $SHOTSTACK_API_KEY"
import { readFileSync } from 'node:fs';

const headers = { 'x-api-key': process.env.SHOTSTACK_API_KEY, 'Content-Type': 'application/json' };
const edit = JSON.parse(readFileSync('template.json', 'utf8'));

const { response } = await fetch('https://api.shotstack.io/edit/stage/render', {
  method: 'POST', headers, body: JSON.stringify(edit)
}).then((r) => r.json());

let render;
do {
  await new Promise((r) => setTimeout(r, 3000));
  render = (await fetch(`https://api.shotstack.io/edit/stage/render/${response.id}`, { headers }).then((r) => r.json())).response;
} while (!['done', 'failed'].includes(render.status));

console.log(render.status, render.url);
import json, os, time, requests

headers = {"x-api-key": os.environ["SHOTSTACK_API_KEY"]}
with open("template.json") as f:
    edit = json.load(f)

render_id = requests.post("https://api.shotstack.io/edit/stage/render", json=edit, headers=headers).json()["response"]["id"]

while True:
    render = requests.get(f"https://api.shotstack.io/edit/stage/render/{render_id}", headers=headers).json()["response"]
    if render["status"] in ("done", "failed"):
        break
    time.sleep(3)

print(render["status"], render.get("url"))
npm install -g @shotstack/cli
export SHOTSTACK_API_KEY=your_sandbox_key

shotstack validate template.json          # offline schema check, free
shotstack render template.json --env stage --watch

Sandbox renders are free and watermarked. Production: the v1 endpoint and key. SDKs

4
Automate it

Send a new set of image URLs per request and every batch becomes its own slideshow.

Paste into Claude, ChatGPT or Cursor — your AI assistant builds the workflow around your data.

Node.js, one render per CSV row, wired to this template. Setup steps in the header.

Guides: Bulk-create from a CSV · Webhooks · Templates endpoint · Render your first video

AI assistants: Markdown () · · · CLI skill: SKILL.md () · MCP server

Common questions

How do I make the Photo with border & text template my own?

Replace the asset URLs in the JSON with your own files and adjust text, timing or effects on each clip. To generate many variations from data, turn the values you change into merge fields ({{ PLACEHOLDER }}) and pass a merge array with each request.

Can I use this square template for Instagram and LinkedIn feeds?

Yes. It renders 1000×1000 (1:1). Set output.aspectRatio to 9:16 or 16:9 in the JSON to produce vertical or landscape versions from the same timeline.

Can I use my own photos?

Yes. The template uses 2 images; replace each image asset's src with a public URL of your own file (JPG, PNG or WebP). Keep the timing and effects, or adjust them per clip.

How do I change the text and fonts?

Edit the text on each text asset in the JSON. Fonts come from the timeline fonts list or the asset's font family; add your own font file URL to timeline.fonts to use a brand typeface.

VIEW ALL TEMPLATES

Experience Shotstack for yourself,
with no risk, and generate your first
  video in 5 minutes.

check

Unlimited developer sandbox

check

No credit card required

Try Free arrow Talk to an expert arrow