skills.rest
Dragble
DragbleOFFICIAL
Explore all skills by this author →
WebsiteGitHub

dragble-export

Export Dragble editor designs as HTML, JSON, text, image, PDF, or ZIP with save and load patterns.

Updated May 11, 2026
Search Tags:#pdf#html#export#auto-save#design json#email editor#dragble
One-click install
npx skills add https://github.com/Dragble/dragble-skills --skill dragble-export-dragble
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dragble-export
Source: https://github.com/Dragble/dragble-skills/tree/main/dragble-export
Command: npx skills add https://github.com/Dragble/dragble-skills --skill dragble-export-dragble

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers integrating the Dragble editor need correct patterns for exporting content, persisting designs, and reloading them for editing. Without guidance, common mistakes like saving only HTML (losing editability) or loading designs before the editor is ready cause broken workflows. ## Core Features & Use Cases - Six Export Formats: Export designs as HTML, JSON, plain text (client-side, free) or image, PDF, ZIP (server-side Chromium, paid plan). - Save/Load & Auto-Save: Persist design JSON plus rendered HTML, reload via loadDesign or loadDesignAsync, and implement debounced auto-save on the design:updated event. - Validation & Audit: Register global and per-tool validators, run audits, and validate templates before loading. - Use Case: Build an email template editor where users edit designs, auto-save every 2 seconds of inactivity, and export final campaigns as minified HTML plus editable design JSON stored in your backend. ## Quick Start Ask the AI to add a save button to your Dragble editor that exports both the design JSON and minified HTML and sends them to your backend API.

Frequently Asked Questions about dragble-export

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I export HTML from the Dragble editor?▼

Call editor.exportHtml() which returns a Promise resolving to the rendered HTML string. Pass options like title to set the document title and minify: true to compress the output.

How do I save and reload a Dragble design for editing?▼

Export both the design JSON via exportJson() and HTML via exportHtml(), then store both in your backend. Reload by calling editor.loadDesign(designJson) inside the editor:ready event listener; HTML alone cannot be reloaded for editing.

Does Dragble image and PDF export work on the free plan?▼

No, exportImage, exportPdf, and exportZip require a paid plan because they use server-side Chromium rendering. They also do not work in popup mode, only in the embedded iframe editor.

Why does my Dragble design fail to load?▼

Loading fails if called before the editor:ready event fires or if the design JSON does not follow the body.rows[].columns[].contents[] hierarchy. Use loadDesignAsync or validateTemplate to catch structural errors.

How do I implement auto-save in the Dragble editor?▼

Listen to the design:updated event and debounce with a 2-second timeout before calling exportHtml and exportJson, then persist both to your backend. Without debouncing, the event fires on every keystroke.

Related Skills

Explore More Software Engineering Skills→
unlayerunlayer
13

unlayer-integration

Integrate the Unlayer visual editor into React, Vue, Angular, and JavaScript applications.

Official
Intermediate
JosephWoodallJosephWoodall
1

pptx-posters

Create HTML/CSS research posters and export them to PDF or PPTX.

Community
Intermediate
unlayerunlayer
13

unlayer-config

Configure Unlayer editor features, appearance, and security settings via JavaScript.

Official
Advanced
unlayerunlayer
13

unlayer-custom-tools

Create and register custom drag-and-drop tools in the Unlayer editor.

Official
Advanced