Menรผ
Exports content from the Unlayer editor โ HTML, PDF, image, plain text, saving and loading design JSON, auto-save patterns, server-side Cloud API export.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fรผgen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prรผfen und installieren.
Basierend auf der SOC-Berufsklassifikation
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.
| 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 |