The HTML behind it
App screenshot ad template HTML
This is the whole template. The fields in double braces fill from your data on every render. Copy it into your account and change anything you like.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style data-thirds="base">
html,body{margin:0}
[data-thirds="canvas"]{position:relative;overflow:hidden}
[data-thirds="canvas"] [data-thirds]{position:absolute;box-sizing:border-box;margin:0}
[data-thirds="text"]{white-space:pre-wrap;overflow-wrap:anywhere}
[data-thirds="image"]{display:block}
[data-thirds="table"]{border-collapse:collapse}
[data-thirds="table"] th,[data-thirds="table"] td{padding:4px 6px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule,#dde1e8)}
[data-thirds="table"] th{background:var(--head,transparent)}
[data-thirds="list"]{display:flex;flex-direction:column}
[data-thirds="canvas"] [data-thirds="item"]{position:relative;flex:none}
</style>
<style>@page { size: 1080px 1350px; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; } </style>
</head>
<body>
<div data-thirds="canvas" data-thirds-kind="image" data-thirds-page="p1" data-thirds-name="Page 1" style="width:1080px;height:1350px;background:#0e7c7b">
<img data-thirds="image" data-thirds-id="brand-logo" data-thirds-name="Brand logo" style="left:70px;top:70px;width:64px;height:64px;object-fit:contain;object-position:50% 50%;" src="{{ logo | default('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiByeD0iMTQiIGZpbGw9IiMwZTdjN2IiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNkOWZmZjUiIHN0cm9rZS13aWR0aD0iNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNMTAgMjZjNi02IDEyLTYgMTggMHMxMiA2IDE4IDAgOC00IDgtNE0xMCA0MmM2LTYgMTItNiAxOCAwczEyIDYgMTggMCA4LTQgOC00Ii8+PC9zdmc+Cg==') }}" alt="Brand logo">
<div data-thirds="text" data-thirds-id="brand" data-thirds-name="Brand" style="left:150px;top:86px;width:800px;height:36px;font-size:24px;color:#d9fff5;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">{{ brand }}</div>
<div data-thirds="text" data-thirds-id="headline" data-thirds-name="Headline" style="left:70px;top:180px;width:940px;height:220px;font-size:72px;color:#ffffff;font-weight:800;line-height:1.05;letter-spacing:-2px;text-align:center;" data-thirds-fit="shrink" data-thirds-min-font="34" data-thirds-max-font="72">{{ headline }}</div>
<div data-thirds="text" data-thirds-id="supporting-line" data-thirds-name="Supporting line" style="left:120px;top:420px;width:840px;height:80px;font-size:28px;color:#d9fff5;font-weight:400;line-height:1.3;text-align:center;">{{ supporting_line }}</div>
<div data-thirds="box" data-thirds-id="phone-frame" data-thirds-name="Phone frame" style="left:320px;top:540px;width:440px;height:900px;background:#0b0b0b;border-radius:64px"></div>
<div data-thirds="box" data-thirds-id="phone-screen-bg" data-thirds-name="Phone screen background" style="left:340px;top:560px;width:400px;height:860px;background:#f2fbfa;border-radius:48px"></div>
<img data-thirds="image" data-thirds-id="screenshot" data-thirds-name="Screenshot" style="left:340px;top:560px;width:400px;height:800px;object-fit:cover;object-position:50% 50%;border-radius:48px 48px 0 0;" src="{{ screenshot | default('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOTAgNzgwIj48cmVjdCB3aWR0aD0iMzkwIiBoZWlnaHQ9Ijc4MCIgZmlsbD0iI2YyZmJmYSIvPjxyZWN0IHg9IjI0IiB5PSIzNiIgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxNCIgcng9IjciIGZpbGw9IiMwZTdjN2IiLz48cmVjdCB4PSIyNCIgeT0iNzAiIHdpZHRoPSIzNDIiIGhlaWdodD0iMTUwIiByeD0iMjAiIGZpbGw9IiMwZTdjN2IiLz48cmVjdCB4PSI0OCIgeT0iOTYiIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQiIHJ4PSI3IiBmaWxsPSIjOWJlN2RjIi8+PHRleHQgeD0iNDgiIHk9IjE3MCIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjUyIiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjZmZmIj4kNCw4MjA8L3RleHQ+PHJlY3QgeD0iMjQiIHk9IjI0NCIgd2lkdGg9IjE2MyIgaGVpZ2h0PSIxMjAiIHJ4PSIxOCIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZDNlY2U5Ii8+PHJlY3QgeD0iMjAzIiB5PSIyNDQiIHdpZHRoPSIxNjMiIGhlaWdodD0iMTIwIiByeD0iMTgiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2QzZWNlOSIvPjxyZWN0IHg9IjQ0IiB5PSIyNjYiIHdpZHRoPSI3MCIgaGVpZ2h0PSIxMiIgcng9IjYiIGZpbGw9IiNiZmUzZGUiLz48cmVjdCB4PSIyMjMiIHk9IjI2NiIgd2lkdGg9IjcwIiBoZWlnaHQ9IjEyIiByeD0iNiIgZmlsbD0iI2JmZTNkZSIvPjxyZWN0IHg9IjQ0IiB5PSIzMDAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMjYiIHJ4PSI2IiBmaWxsPSIjMGU3YzdiIi8+PHJlY3QgeD0iMjIzIiB5PSIzMDAiIHdpZHRoPSI4MCIgaGVpZ2h0PSIyNiIgcng9IjYiIGZpbGw9IiNmZjdhMWEiLz48cmVjdCB4PSIyNCIgeT0iMzg4IiB3aWR0aD0iMzQyIiBoZWlnaHQ9IjYwIiByeD0iMTQiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2QzZWNlOSIvPjxyZWN0IHg9IjI0IiB5PSI0NjQiIHdpZHRoPSIzNDIiIGhlaWdodD0iNjAiIHJ4PSIxNCIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZDNlY2U5Ii8+PHJlY3QgeD0iMjQiIHk9IjU0MCIgd2lkdGg9IjM0MiIgaGVpZ2h0PSI2MCIgcng9IjE0IiBmaWxsPSIjZmZmIiBzdHJva2U9IiNkM2VjZTkiLz48cmVjdCB4PSI0NCIgeT0iNDEwIiB3aWR0aD0iMTYwIiBoZWlnaHQ9IjE0IiByeD0iNyIgZmlsbD0iI2JmZTNkZSIvPjxyZWN0IHg9IjQ0IiB5PSI0ODYiIHdpZHRoPSIyMDAiIGhlaWdodD0iMTQiIHJ4PSI3IiBmaWxsPSIjYmZlM2RlIi8+PHJlY3QgeD0iNDQiIHk9IjU2MiIgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxNCIgcng9IjciIGZpbGw9IiNiZmUzZGUiLz48cmVjdCB4PSIyNCIgeT0iNjYwIiB3aWR0aD0iMzQyIiBoZWlnaHQ9IjY0IiByeD0iMzIiIGZpbGw9IiMwZTdjN2IiLz48cmVjdCB4PSIxNDAiIHk9IjY4NiIgd2lkdGg9IjExMCIgaGVpZ2h0PSIxMiIgcng9IjYiIGZpbGw9IiNmZmYiLz48L3N2Zz4K') }}" alt="App screenshot">
<div data-thirds="box" data-thirds-id="phone-notch" data-thirds-name="Phone notch" style="left:460px;top:578px;width:160px;height:34px;background:#0b0b0b;border-radius:17px"></div>
<div data-thirds="box" data-thirds-id="store-button" data-thirds-name="Store button" style="left:300px;top:1200px;width:480px;height:90px;background:#ffffff;border-radius:45px"></div>
<div data-thirds="text" data-thirds-id="store-action" data-thirds-name="Store action" style="left:300px;top:1226px;width:480px;height:40px;font-size:28px;color:#0e7c7b;font-weight:800;line-height:1.2;text-align:center;">{{ store_action }}</div>
</div>
</body>
</html>
Sample data
The values that made the picture.
Change any of them, and the same HTML makes a new file.
{
"brand": "Tidal Software",
"headline": "Your cash flow in one glance",
"supporting_line": "See what came in, what went out, and what is due next, all on one screen.",
"store_action": "Get the free app"
}