Does PostGrid accept the exported HTML directly?

Yes. The export is a self-contained HTML document sized with bleed, which is what PostGrid's frontHTML and backHTML fields expect. Preflight checks the address zone and bleed before you export.

How do merge variables map to PostGrid?

A merge field named firstName exports as {{to.firstName}} when you pass provider=postgrid. Custom variables export as {{variableName}} and you pass them in mergeVariables.

Can I preview with real recipient data before sending?

Yes. Upload a CSV in the editor and step through rows. Names that overflow their text box are flagged before anything reaches PostGrid.

Do I need a PostGrid account to try this?

No. Export from the sandbox and inspect the HTML. Connect a PostGrid test key when you want to send, and nothing prints until you switch to a live key.

Integration · PostGrid

Design PostGrid postcards without writing HTML.

An HTML postcard designer that outputs the frontHTML and backHTML PostGrid expects, with merge variables in PostGrid's syntax, at 300 DPI, in 6×4, 9×6 and 11×6.

Try the editor Read the docs

6×4, 9×6, 11×6 postcards Letters PostGrid merge syntax Test and live keys

DesignerTool HTML postcard designer exporting PostGrid HTML templates

How it works

From design to PostGrid in three steps

1
Design in DesignerTool
Pick a PostGrid size. The address block on the back is locked in PostGrid's position so their preflight never rejects it.
2
Export with PostGrid syntax
Add provider=postgrid to the export call. Merge fields export as {{to.firstName}} style variables, and images as signed URLs.
3
Create the postcard in PostGrid
Post frontHTML and backHTML to PostGrid's postcards endpoint, or connect your PostGrid key and send a recipient list from the editor.

Code

Send a design to PostGrid

The editor hands your page the HTML when the user saves. Store it, then create the postcard from your server with PostGrid's API.

Front and back arrive as separate documents, ready for frontHTML and backHTML
Merge variables arrive as {{first_name}}; pass the values in mergeVariables
Works with PostGrid's test mode, so nothing prints until you switch keys

Your PostGrid API key stays on your server. DesignerTool never sees it or your recipient data.

send-to-postgrid.js

// 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 PostGrid's API
await fetch('https://api.postgrid.com/print-mail/v1/postcards', {
  method: 'POST',
  headers: { 'x-api-key': process.env.POSTGRID_API_KEY, 'Content-Type': 'application/json' },
  body: JSON.stringify({
    to: recipient,
    from: sender,
    size: '6x4',
    frontHTML: template.front,    // HTML saved from DesignerTool
    backHTML: template.back,
    mergeVariables: { first_name: 'Ana' },
  }),
});

Sizes

Every PostGrid format, already set up

PostGrid size	Trim size	Export size with bleed	Pixels at 300 DPI
6×4	6 × 4 in	6.25 × 4.25 in	1875 × 1275
9×6	9 × 6 in	9.25 × 6.25 in	2775 × 1875
11×6	11 × 6 in	11.25 × 6.25 in	3375 × 1875
Letter	8.5 × 11 in	8.5 × 11 in, no bleed	2550 × 3300

FAQ

PostGrid questions

The two HTML documents PostGrid renders for each side of a postcard. DesignerTool exports both, at 300 DPI with bleed, with merge variables in PostGrid's {{to.firstName}} syntax.

Free to try · no card · no per-postcard fee

Design your next PostGrid postcard in the browser.

Try the editor without an account, then connect your PostGrid key when you're ready to send.

Try the editor Create free account

Passes Lob and PostGrid preflight Cancel any time Sandbox keys never expire