The visual HTML designer for Lob postcard templates.
An HTML postcard designer for Lob. Design postcards and letters on a canvas and export the HTML Lob renders as-is, with merge variables in Lob's syntax and every size Lob prints. No hand-coded HTML, no failed renders.
From design to Lob in three steps
- 1
Design in DesignerTool
Pick a Lob size. Bleed and the address zone on the back are already correct for Lob's template checker.
- 2
Export with Lob syntax
Add
provider=lobto the export call, or connect your Lob key and skip the export entirely. Merge fields become{{first_name}}style merge variables. - 3
Create the postcard in Lob
Pass
frontandbacktopostcards.create, or let us send it through your connected Lob account with a CSV of recipients.
Send a design to Lob
The editor hands your page the HTML when the user saves. Store it, then create the postcard from your server with Lob's API.
- One self-contained HTML document per side, sized with bleed
- Merge variables arrive as {{first_name}}, the syntax Lob fills from merge_variables
- Images are referenced by URL and fonts are linked in the head, so Lob renders what the user saw
Your Lob API key stays on your server. DesignerTool never sees it or your recipient data.
// Browser: send the saved HTML to your server
designer.addEventListener('html-button-click', async (event) => {
const { front, back } = event.detail[0];
await fetch('/postcard-templates', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ front: front.HTMLContent, back: back.HTMLContent }),
});
});
// Server: create the postcard with Lob's API
await fetch('https://api.lob.com/v1/postcards', {
method: 'POST',
headers: {
Authorization: 'Basic ' + btoa(process.env.LOB_API_KEY + ':'),
'Content-Type': 'application/json',
},
body: JSON.stringify({
to: recipientAddress,
from: returnAddress,
size: '4x6',
front: template.front, // HTML saved from DesignerTool
back: template.back,
merge_variables: { first_name: 'Ana' },
use_type: 'marketing',
}),
});Every Lob format, already set up
| Lob product | Trim size | Export size with bleed | Pixels at 300 DPI |
|---|---|---|---|
| Postcard 4×6 | 4 × 6 in | 4.25 × 6.25 in | 1275 × 1875 |
| Postcard 6×9 | 6 × 9 in | 6.25 × 9.25 in | 1875 × 2775 |
| Postcard 6×11 | 6 × 11 in | 6.25 × 11.25 in | 1875 × 3375 |
| Letter | 8.5 × 11 in | 8.5 × 11 in, no bleed | 2550 × 3300 |
Lob questions
Design your next Lob postcard in the browser.
Try the editor without an account, then connect your Lob key when you're ready to send.