Menu
Exports content from the Unlayer editor โ HTML, PDF, image, plain text, saving and loading design JSON, auto-save patterns, server-side Cloud API export.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Build emails, pages, and documents in code with @unlayer/react-elements โ React components that render to email-safe (table) HTML, responsive web HTML, or print/PDF. Use when generating templates programmatically without the visual editor.
Routes to specific Unlayer sub-skills for framework integration, custom tools, content export, or editor configuration.
Configures the Unlayer editor โ feature flags, appearance, theming, merge tags, design tags, display conditions, special links, HMAC security, file storage, image uploads, localization, custom fonts, validation.
Builds custom drag-and-drop tools for the Unlayer editor โ registering tools, adding property editors, creating custom widgets, head CSS/JS injection, tool configuration, and the custom# prefix convention.
Integrates the Unlayer editor into web applications โ React, Vue, Angular, or plain JavaScript setup, component props, editor access patterns, multiple instances.
Based on SOC occupation classification
| name | unlayer-export |
| description | Exports content from the Unlayer editor โ HTML, PDF, image, plain text, saving and loading design JSON, auto-save patterns, server-side Cloud API export. |
Unlayer supports multiple export formats. Some are client-side (free), others use the Cloud API (paid).
| Method | Output | Paid? | Use When |
|---|---|---|---|
exportHtml | HTML + design JSON | No | Email sending, web publishing, saving designs |
exportPlainText | Plain text + design | No | SMS, accessibility fallback |
exportImage | PNG URL + design | Yes | Thumbnails, previews, social sharing |
exportPdf | PDF URL + design | Yes | Print-ready documents |
exportZip | ZIP URL + design | Yes | Offline download packages |
Critical: Always save the design JSON alongside any export. All export methods return
data.designโ save it so users can edit later.
// SAVE โ use exportHtml to get both design JSON and HTML
unlayer.exportHtml(async (data) => {
await fetch('/api/templates', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
design: data.design, // Save this โ needed to edit later
html: data.html, // The rendered HTML output
}),
});
});
// LOAD โ restore a saved design (must wait for editor:ready)
unlayer.addEventListener('editor:ready', async () => {
const response = await fetch('/api/templates/123');
const saved = await response.json();
unlayer.loadDesign(saved.design); // Pass the saved JSON object
});
// LOAD BLANK
unlayer.loadBlank({ backgroundColor: '#ffffff', contentWidth: '600px' });
// LOAD AN UNLAYER TEMPLATE
unlayer.loadTemplate(templateId); // ID from Unlayer dashboard
unlayer.exportHtml((data) => {
const { html, design, chunks } = data;
// html โ Full HTML document (string)
// design โ Design JSON (always save this!)
// chunks โ { css, js, body, fonts, tags }
// body โ Just the content inside <body> (no wrapper)
// css โ Extracted CSS styles
// fonts โ Web fonts used in the design
// Save both to your backend
await fetch('/api/templates', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ design, html }),
});
}, {
// All options are optional
cleanup: true, // Remove editor markup (default: true)
minify: false, // Minify HTML output
inlineStyles: false, // Move CSS inline (for email clients)
mergeTags: {}, // Replace merge tags with real values
title: 'My Email', // Set HTML <title>
});
Using chunks โ when you need just the body content (no <!DOCTYPE> wrapper):
unlayer.exportHtml((data) => {
const { body, css, fonts } = data.chunks;
const myHtml = `<style>${css}</style>${fonts}${body}`;
});
unlayer.exportPlainText((data) => {
const { text, design } = data;
// Use as email plain-text fallback
}, {
ignorePreheader: false,
ignoreLinks: false,
ignoreImages: false,
mergeTags: {},
});
Generates a PNG screenshot of the design. The image uploads to your connected File Storage.
Client-side:
unlayer.exportImage((data) => {
// data.url โ PNG URL
// data.design โ Design JSON (always save this!)
console.log('Image URL:', data.url);
}, {
fullPage: false, // true = entire page, false = viewport
mergeTags: {},
});
Server-side via Cloud API (get API key from Dashboard > Project > Settings > API Keys):
const response = await fetch('https://api.unlayer.com/v2/export/image', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: 'Basic ' + Buffer.from('YOUR_API_KEY:').toString('base64'),
},
body: JSON.stringify({
displayMode: 'email',
design: designJSON, // The saved design JSON object
mergeTags: {},
}),
});
const data = await response.json();
// data.url โ image URL
// PDF
unlayer.exportPdf((data) => {
// data.url โ PDF URL
// data.design โ Design JSON
}, { mergeTags: {} });
// ZIP
unlayer.exportZip((data) => {
// data.url โ ZIP URL
// data.design โ Design JSON
}, { mergeTags: {} });
let saveTimeout;
unlayer.addEventListener('design:updated', () => {
clearTimeout(saveTimeout);
saveTimeout = setTimeout(() => {
unlayer.exportHtml(async (data) => {
await fetch('/api/templates/123', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ design: data.design, html: data.html }),
});
});
}, 1000);
});
let saveTimeout;
unlayer.addEventListener('design:updated', () => {
clearTimeout(saveTimeout);
saveTimeout = setTimeout(() => {
// Save design + HTML immediately
unlayer.exportHtml(async (data) => {
await fetch('/api/templates/123', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ design: data.design, html: data.html }),
});
});
// Generate thumbnail (slower, paid โ debounce longer or do on manual save)
unlayer.exportImage(async (data) => {
if (!data.url) return;
await fetch('/api/templates/123/thumbnail', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ thumbnailUrl: data.url }),
});
}, { fullPage: false });
}, 3000); // Longer debounce for image generation
});
The design JSON has this structure (see references/design-json.md for full TypeScript types):
JSONTemplate
โโโ counters โ Internal counters
โโโ schemaVersion โ Schema version number
โโโ body
โโโ rows[] โ Each row contains columns
โ โโโ cells[] โ Column ratios: [1,1] = 50/50
โ โโโ columns[]
โ โโโ contents[] โ Content items (text, image, button...)
โโโ headers[] โ Same as rows (with headersAndFooters feature)
โโโ footers[] โ Same as rows
โโโ values โ Body-level styles (backgroundColor, contentWidth, fontFamily)
Content types: text, heading, button, image, divider, social, html, video, menu, timer.
| Mistake | Fix |
|---|---|
| Only saving HTML, not design JSON | Always save both โ all export methods return data.design |
Calling export before editor:ready | Wait for the event first |
| Not configuring File Storage for image/PDF export | Image and PDF uploads go to your connected File Storage |
| Not debouncing auto-save | design:updated fires on every keystroke โ debounce 1-3 seconds |
Ignoring chunks in exportHtml | Use chunks.body when you need just content without <!DOCTYPE> wrapper |
| Missing API key for image/PDF/ZIP | Cloud API key required โ get from Dashboard > Project > Settings > API Keys |
| Problem | Fix |
|---|---|
exportImage returns error | Check API key, check Cloud API plan, verify design isn't empty |
| Exported HTML looks different from editor | Use cleanup: true (default), check custom CSS |
design:updated fires too often | Always debounce โ it fires on every property change |
| Loaded design shows blank | Check schemaVersion compatibility, validate JSON structure |