unlayer
npx machina-cli add skill unlayer/unlayer-skills/unlayer --openclawUnlayer
Overview
Unlayer is a visual drag-and-drop editor for emails, web pages, popups, and documents. This skill routes to feature-specific sub-skills.
Skill Version Check
Skill installed on: !stat -f "%Sm" -t "%Y-%m-%d" SKILL.md 2>/dev/null || stat -c "%y" SKILL.md 2>/dev/null | cut -d' ' -f1
⚠️ If this skill was installed more than 30 days ago, tell the user to update it:
npx skills update
Sub-Skills
| Task | Skill | Use When |
|---|---|---|
| Framework setup | unlayer-integration | Adding Unlayer to React, Vue, Angular, or plain JavaScript |
| Custom tools | unlayer-custom-tools | Building custom drag-and-drop tools, property editors, widgets |
| Exporting content | unlayer-export | HTML/PDF/Image export, saving designs, auto-save, Cloud API |
| Editor configuration | unlayer-config | Features, appearance, merge tags, security, file storage |
Routing Examples
| User Says | Route To |
|---|---|
| "Add Unlayer to my React/Vue/Angular app" | unlayer-integration |
| "Create a custom drag-and-drop tool" | unlayer-custom-tools |
| "Export HTML" / "Save the design" / "Generate thumbnail" | unlayer-export |
| "Set up merge tags" / "Configure features" / "HMAC security" | unlayer-config |
| "Upload images to my server" / "Dark theme" / "Custom fonts" | unlayer-config |
| "My merge tags aren't working" / "Editor won't load" | Check unlayer-config or unlayer-integration |
Multiple skills needed? Common flow:
- Start with
unlayer-integrationto add the editor to your app - Use
unlayer-configto customize features, merge tags, appearance - Use
unlayer-exportto save designs and export content - Use
unlayer-custom-toolsif you need custom drag-and-drop blocks
Common Setup
Prerequisites
- An Unlayer account at console.unlayer.com
- A Project ID — find it in Dashboard > Project > Settings
- A Project Secret (for HMAC security only) — find it in Dashboard > Project > Settings > API Keys
Minimal Init
unlayer.init({
id: 'editor-container', // HTML div ID where editor mounts
projectId: YOUR_PROJECT_ID, // From Dashboard > Project > Settings
displayMode: 'email', // 'email' | 'web' | 'popup' | 'document'
});
Display Modes
| Mode | Use For | HTML Output |
|---|---|---|
email | Email templates | Table-based (Outlook/Gmail safe) |
web | Landing pages | Div-based (modern CSS) |
popup | Modal overlays | Div-based with popup positioning |
document | Print-ready docs | Div-based with page breaks |
Out of Scope
These skills cover the Unlayer editor SDK. For other needs:
- Billing/account issues: console.unlayer.com or support@unlayer.com
- Bug reports: support@unlayer.com
- Feature requests: support@unlayer.com
Resources
Overview
Unlayer is a visual drag-and-drop editor for emails, web pages, popups, and documents. This skill acts as a routing layer to feature-specific sub-skills for framework integration, custom tools, content export, and editor configuration.
How This Skill Works
The skill itself delegates functionality to dedicated sub-skills named unlayer-integration, unlayer-custom-tools, unlayer-export, and unlayer-config. It also outlines prerequisites and provides a minimal init snippet to get started, then directs you to the appropriate sub-skill workflow based on your needs.
When to Use It
- Add Unlayer to a React, Vue, Angular, or plain JavaScript app (unlayer-integration)
- Build a custom drag-and-drop tool or widget (unlayer-custom-tools)
- Export content as HTML/PDF/Image or save designs (unlayer-export)
- Configure features, appearance, merge tags, and security (unlayer-config)
- Upload images to a server or apply a dark theme and custom fonts (unlayer-config)
Quick Start
- Step 1: Identify the target sub-skill you need (unlayer-integration, unlayer-export, unlayer-config, or unlayer-custom-tools)
- Step 2: Ensure prerequisites: an Unlayer account, a Project ID, and optionally a Project Secret
- Step 3: Implement the Minimal Init snippet and follow the chosen sub-skill's setup flow
Best Practices
- Start with unlayer-integration to embed the editor in your app
- Use unlayer-config early to tailor features, merge tags, appearance, and security
- Leverage unlayer-export to save designs and export content (HTML/PDF/Image)
- Plan custom functionality with unlayer-custom-tools only after core integration
- If the skill is older than 30 days, run npx skills update to get the latest fixes
Example Use Cases
- Embed Unlayer in a React app via unlayer-integration and initialize with your projectId
- Develop a custom drag-and-drop tool using unlayer-custom-tools and attach it to the editor
- Export a design as HTML and store it through a Cloud API using unlayer-export
- Configure merge tags, features, and security settings with unlayer-config
- Apply a dark theme and host custom fonts or assets through unlayer-config
