Export Issues

This page covers problems with HTML, image, and PDF exports from the Pexelize editor.

HTML renders differently in email clients

What you see: The exported HTML looks correct in a browser but breaks in Outlook, Gmail, or Yahoo Mail -- misaligned columns, missing background images, or collapsed padding.

Why it happens: Email clients strip or ignore modern CSS properties. Outlook uses the Word rendering engine and doesn't support flexbox, grid, max-width in some contexts, or background-image on <div> elements.

Fix:

1. Use the editor's built-in content blocks instead of raw HTML -- they output email-safe table-based markup.
2. Always test with a service like Litmus or Email on Acid before sending.
3. If you add custom HTML, restrict yourself to the email-safe subset:

<!-- Safe: table-based layout with inline styles -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td style="padding: 16px; font-family: Arial, sans-serif;">
      Content here
    </td>
  </tr>
</table>

4. For Outlook-specific background images, use VML:

<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
<v:fill type="frame" src="https://example.com/bg.jpg" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="background-image: url('https://example.com/bg.jpg'); width: 600px; height: 400px;">
  <!-- content -->
</div>
<!--[if mso]></v:textbox></v:rect><![endif]-->

---

exportImage or exportPdf timing out

What you see: The callback never fires, or you receive an error: Export timed out after 30000ms.

Why it happens: Image and PDF exports render the design server-side. Large designs with many images or custom fonts can exceed the default 30-second timeout.

Fix:

1. Increase the timeout:

editor.exportImage(
  (data) => {
    console.log('Image URL:', data.url);
  },
  { timeout: 60000 } // 60 seconds
);

editor.exportPdf(
  (data) => {
    console.log('PDF URL:', data.url);
  },
  { timeout: 60000 }
);

2. Reduce design complexity -- very large designs (20+ sections) should be split.
3. Ensure all images referenced in the design are publicly accessible. The server-side renderer cannot reach localhost or authenticated URLs.

---

Missing images in export

What you see: Exported HTML or PDF shows broken image placeholders where images should be.

Why it happens: The images use URLs that are inaccessible to the recipient or the export renderer -- typically localhost URLs, expired presigned URLs, or private storage paths.

Fix:

1. Confirm images use absolute, publicly accessible HTTPS URLs.

// Bad
"http://localhost:3000/uploads/photo.jpg"
"blob:http://localhost:3000/abc-123"

// Good
"https://cdn.example.com/uploads/photo.jpg"

2. If using presigned URLs (S3, GCS), set a long expiry or use permanent public URLs.

// AWS S3 example -- use a long expiry
const url = s3.getSignedUrl('getObject', {
  Bucket: 'my-bucket',
  Key: 'uploads/photo.jpg',
  Expires: 60 * 60 * 24 * 7, // 7 days
});

3. Check your image upload handler returns the final public URL, not a temporary upload URL:

onImageUpload={(file, done) => {
  uploadToStorage(file).then((result) => {
    // Return the permanent CDN URL, not the upload endpoint
    done({ progress: 100, url: result.cdnUrl });
  });
}}

---

Exported HTML contains relative URLs

What you see: Images and links in the HTML use relative paths like /images/logo.png that break when the email is opened.

Why it happens: Your image upload handler or merge tags return relative URLs instead of fully qualified ones.

Fix: Always return absolute URLs from your upload handler and ensure merge tag values resolve to absolute URLs at send time.

// In your upload handler, return the full URL
done({ progress: 100, url: `https://cdn.example.com${path}` });

---

Quick checklist

Check	How to verify
HTML uses table layout	View source of exported HTML -- should be <table> based
All image URLs are absolute HTTPS	Search exported HTML for src=" and verify each URL
Export timeout is sufficient	Pass { timeout: 60000 } and retry
Images are publicly accessible	Open each image URL in an incognito browser window